firefox-logo-animation
Example animation using the Web Animations API.
HTML Content
<div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.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);