A Pen by John Wu.

index.html

<div class="box"></div>

Native-JavaScript-Animation.markdown

Native JavaScript Animation

A Pen by John Wu on CodePen.

License.

script.js

var box = document.querySelector('.box');

box.animate([
  { transform: 'scaleX(1)', offset: 0 },
  { transform: 'scaleX(2)', offset: 0.3 },
  { transform: 'scaleX(0.5)', offset: 0.6 },
  { transform: 'scaleX(1)', offset: 1 }
], {
  duration: 1000,
  iterations: 999
});

style.css

.box {
  width: 50px;
  height: 50px;
  background-color: #fdd;
  transform-origin: left top;
}