<header class="header">
Web Animations Demo
</header>
<div class="box" id="box"></div>
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFFDF8;
}
.header {
background-color: #80C7D2;
border-bottom: 4px solid #3E888C;
padding: 20px;
color: #1C1208;
font-size: 18pt;
font-weight: bold;
font-family: "Gill Sans", "Gill Sans MT";
}
.box {
width: 100px;
height: 100px;
background-color: #E15E5F;
position: absolute;
}
/*
* This is a demonstration of the Web Animations API.
* It uses the latest version of web-animations-next.min.js
* (v 2.1.2 at the time of writing). Feel free to fork and use this
* as a starting point for one of your own projects
*/
window.onload = function() {
var box = document.getElementById("box");
/*
* We'll start by moving the box to the middle of the page.
* First, let's get the coordinates
*/
var x = ((window.innerWidth/2) - (box.offsetWidth/4));
var y = ((window.innerHeight/2) - (box.offsetHeight));
/*
* To animate the box, we'll need to create a KeyframeEffect().
* This allows us to animate between a set of specific coordinates,
* or key frames. A KeyframeEffect takes 3 arguments:
*
* element - an object to animate
*
* keyframes - An array of keyframe values to animate between. Keyframes
* are objects that contain the properties you want to
* animate as keys, and the values you want to animate between
* as the values. In this case, we are changing the marginLeft
* from 0 to the centered width, and the marginTop from 0 to
* the centered height.
*
* AnimationEffectTiming - The AnimationEffectTiming object controls
* the way the properties are animated. In this case, we want the
* duration to last a total of 1 second (1000ms). We want it to
* stay put after it finishes animating, so we'll set the "fill"
* property to "forwards"
*/
var animCenter = new KeyframeEffect(
box,
[
{marginLeft:0, marginTop:0},
{marginLeft:x, marginTop:y}
],
{duration:1000, fill:"forwards"}
);
/*
* At this point, we've only defined the animation. Now we have to play it!
* To do this, we simply reference the document's timeline and tell it
* to play our animation
*/
document.timeline.play(animCenter);
}
Also see: Tab Triggers