Simple animation

by intrinsica

HTML

<svg id="sv" height="100">
  <rect id="_" x="0" y="0" width="25" height="25" fill="darkblue" stroke="none" shape-rendering="crispEdges"></rect>
  <rect id="_c" x="0" y="25" width="25" height="25" fill="black" stroke="none" shape-rendering="crispEdges"></rect>
  <rect id="_a" x="0" y="50" width="25" height="25" fill="darkred" stroke="none" shape-rendering="crispEdges"></rect>
  <rect id="_b" x="0" y="75" width="25" height="25" fill="darkgreen" stroke="none" shape-rendering="crispEdges"></rect>
</svg>

CSS

body {margin:0;overflow:hidden;}
#_b {
  animation: kf 1.67s cubic-bezier(0.5,0, 0.5,1) 0s infinite alternate;
}
@keyframes kf {
    0%   {x: 0px;}
    100% {x: calc(100% - 25px);}
}

#_a {
  animation: kf2 1.67s linear 0s infinite alternate;
}
/* generated from min-jerk */
@keyframes kf2 {
    0%   { transform: translate3d(0.00000000%, 0px, 0px); }
    1%   { transform: translate3d(0.00098506%, 0px, 0px); }
    2%   { transform: translate3d(0.00776192%, 0px, 0px); }
    3%   { transform: translate3d(0.02579958%, 0px, 0px); }
    4%   { transform: translate3d(0.06022144%, 0px, 0px); }
    5%   { transform: translate3d(0.11581250%, 0px, 0px); }
    6%   { transform: translate3d(0.19702656%, 0px, 0px); }
    7%   { transform: translate3d(0.30799342%, 0px, 0px); }
    8%   { transform: translate3d(0.45252608%, 0px, 0px); }
    9%   { transform: translate3d(0.63412794%, 0px, 0px); }
   10%   { transform: translate3d(0.85600000%, 0px, 0px); }
   11%   { transform: translate3d(1.12104806%, 0px, 0px); }
   12%   { transform: translate3d(1.43188992%, 0px, 0px); }
   13%   { transform: translate3d(1.79086258%, 0px, 0px); }
   14%   { transform: translate3d(2.20002944%, 0px, 0px); }
   15%   { transform: translate3d(2.66118750%, 0px, 0px); }
   16%   { transform: translate3d(3.17587456%, 0px, 0px); }
   17%   { transform: translate3d(3.74537642%, 0px, 0px); }
   18%   { transform: translate3d(4.37073408%, 0px, 0px); }
   19%   { transform: translate3d(5.05275094%, 0px, 0px); }
   20%   { transform: translate3d(5.79200000%, 0px, 0px); }
   21%   { transform: translate3d(6.58883106%, 0px, 0px); }
   22%   { transform: translate3d(7.44337792%, 0px, 0px); }
   23%   { transform: translate3d(8.35556558%, 0px, 0px); }
   24%   { transform: translate3d(9.32511744%, 0px, 0px); }
   25%   { transform: translate3d(10.3515625%, 0px, 0px); }
   26%   { transform: translate3d(11.4342426%, 0px, 0px); }
   27%   { transform: translate3d(12.5723194%, 0px, 0px); }
   28%   { transform:...

JavaScript

var i = 0, inc = 0.01;
function mj(t){ // min-jerk
  var t3 = t*t*t;
  return 6*t*t*t3 - 15*t*t3 + 10*t3;
}
function InOutQuadratic (p) { var m=p-1,t=p*2; if (t < 1) return p*t;             return 1-m*m            *  2;
}
function InOutCubic     (p) { var m=p-1,t=p*2; if (t < 1) return p*t*t;           return 1+m*m*m          *  4;
}
function InOutSine      (p) { return 0.5*(1 - Math.cos( p * Math.PI     )); 
}
sv.setAttribute("width", window.innerWidth);
function draw() {
    requestAnimationFrame(draw);
    _.setAttribute("x", mj(i)*(window.innerWidth-25));
    _c.setAttribute("x", InOutSine(i)*(window.innerWidth-25));
    i += inc;
    if (i>1 || i<0) inc = -inc;
}
draw();