<div class="colorful"></div>
:root {
  --translation: 0;
}
.colorful {
  transform: 
    translateX(calc(var(--translation) * 1vw))
    translateY(calc(var(--translation) * 1vh));/*
    rotate(calc(var(--translation) * .025turn));*/
  filter: hue-rotate(calc(var(--translation) * 4.5deg));
  
  transition: transform 5000ms ease-in-out, filter 5000ms linear;
  
  width: 10vmin;
  height: 10vmin;
  border-radius: 2.5vmin;
  background: hsl(0, 50%, 50%);
  will-change: transform, filter;
}

.go {
  --translation: 80;
}

body {
  height: 100vh;
  display: flex;
  overflow: hidden;
  background: hsl(0, 50%, 12%);
}
var colorful = document.querySelector('.colorful');

colorful.addEventListener('transitionend', function(e) {
  console.log(e.propertyName)
  if (e.propertyName === 'transform') {
    document.documentElement.classList.toggle('go');
  }
});

setTimeout(function() {
  document.documentElement.classList.add('go');
}, 10);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.