:root{--primary-color:#fff;--foreground-color:#000;--duration:1s;--easing:cubic-bezier(.5,0,.5,1)}body,html{height:100%}body{background:var(--primary-color)}.ball{animation-direction:alternate;animation-duration:2s;animation-fill-mode:both;animation-iteration-count:5;animation-name:move-like-a-square;background:red;border-radius:50%;height:5vmin;width:5vmin}.ball:hover{background:blue;transform:scale(1.5);transition-duration:var(--duration),3s}@keyframes move-like-a-square{0%{transform:none}25%{transform:translate(20vw)}50%{transform:translateY(20vw) translate(20vw)}75%{transform:translateY(20vw) translate(0)}to{transform:none}}@keyframes slide-right{0%{transform:translate(0)}to{transform:translate(50vw)}}