Animation inspector example: Web Animations API

Firefox Logo Animation

Example animation using the Web Animations API.

HTML Content

<div class="channel">
  <img src="developer.png" id="icon"/>
  <span id="note">Firefox Developer Edition</span>
</div>

CSS Content

.channel {
  padding: 2em;
  margin: 0.5em;
  box-shadow: 1px 1px 5px #808080;
  margin: 1.5em;
}

.channel > * {
  vertical-align: middle;
  line-height: normal;
}

#icon {
  width: 50px;
  height: 50px;
  filter: grayscale(100%);
}

#note {
  margin-left: 1em;
  font: 1.5em "Open Sans",Arial,sans-serif;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  opacity: 0;
  width: 0;
}

JavaScript Content

var iconKeyframeSet = [
  { transform: 'scale(1)', filter: 'grayscale(100%)'},
  { filter:  'grayscale(100%)', offset: 0.333},
  { transform: 'scale(1.5)', offset: 0.666 },
  { transform: 'scale(1.5)', filter: 'grayscale(0%)'}
];

var noteKeyframeSet = [
  { opacity: '0', width: '0'},
  { opacity: '1', width: '300px'}
];

var iconKeyframeOptions = {
  duration: 750,
  fill: 'forwards',
  easing: 'ease-in',
  endDelay: 100
}

var noteKeyframeOptions = {
  duration: 500,
  fill: 'forwards',
  easing: 'ease-out',
  delay: 150
}

var icon = document.getElementById("icon");
var note = document.getElementById("note");

var iconAnimation = icon.animate(iconKeyframeSet, iconKeyframeOptions);
var noteAnimation = note.animate(noteKeyframeSet, noteKeyframeOptions);

iconAnimation.pause();
noteAnimation.pause();

var firstTime = true;

function animateChannel(e) {
 if (e.button != 0) {
 return;
 }
  if (e.target.id != "icon") {
    return;
  }
  if (firstTime) {
    iconAnimation.play();
    noteAnimation.play();
    firstTime = false;
  } else {
    iconAnimation.reverse();
    noteAnimation.reverse();
  }
}

document.addEventListener("click", animateChannel);