Contents

<style>
#container {
  position: relative;
}

#control {
  position: absolute;
  background-color: black;
  width: 20px;
  height: 0px;
}

#target {
  position: absolute;
  left: 20px;
  background-color: rgba(0, 128, 0, 0.25);
  width: 280px;
  height: 0px;
}

.block {
  padding-left: 30px;
  border-bottom: 1px solid black;
  box-sizing: border-box;
  width: 300px;
  height: 50px;
  font-size: 20px;
}
</style>

<div id="container">
  <div id="control"></div>
  <div id="target"></div>
</div>
<script src="../bootstrap.js"></script>
<script>
var easings = [
  '',
  'linear',
  'ease-in-out',
  'step-middle',
  'steps(4, end)',
];

var keyframeHeight = 50;
var timing = {duration: easings.length * 1000, fill: 'forwards'};

control.animate({height: easings.length * keyframeHeight + 'px'}, timing);

var keyframes = [];
easings.forEach(function (easing, i) {
  var textBlock = document.createElement('div');
  textBlock.textContent = easing.length ? easing : '<default>';
  textBlock.classList.add('block');
  container.appendChild(textBlock);
  var keyframe = {height: i * keyframeHeight + 'px'};
  if (easing.length) {
    keyframe.easing = easing;
  }
  keyframes.push(keyframe);
});
keyframes.push({height: easings.length * keyframeHeight + 'px'});
target.animate(keyframes, timing);
</script>

Version data entries

2 entries across 2 versions & 2 rubygems

Version	Path
polymer-paper-rails-0.2.0	app/assets/components/web-animations-js/test/testcases/auto-test-keyframe-easing.html
polymer-core-rails-0.2.0	app/assets/components/web-animations-js/test/testcases/auto-test-keyframe-easing.html