Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 46 lines (36 sloc) 1.105 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
<!DOCTYPE html>
<style>
.anim {
left: 50px;
width: 100px;
height: 100px;
background-color: #FAA;
position: absolute;
}

#a {
top: 0px
}

#b {
top: 100px;
}

#c {
top: 200px
}

#d {
top: 300px;
}

</style>

<div>
<div id="a" class="anim"></div>
<div id="b" class="anim"></div>
<div id="c" class="anim"></div>
<div id="d" class="anim"></div>
</div>

<script src="prototype.js"></script>
<script src="web-animation.js"></script>
<script>

new Anim(document.querySelector("#a"), {fill: "forwards", startDelay: 1, iterationDuration: 2, prop: "left", to: "200px"});
new Anim(document.querySelector("#b"), {fill: "forwards", startDelay: 1, iterationDuration: 2, prop: "left", timingFunction: new TimingFunction("ease-in"), to: "200px"});
new Anim(document.querySelector("#c"), {fill: "forwards", startDelay: 1, iterationDuration: 2, prop: "left", timingFunction: new TimingFunction("ease-out"), to: "200px"});
new Anim(document.querySelector("#d"), {fill: "forwards", startDelay: 1, iterationDuration: 2, prop: "left", timingFunction: new TimingFunction([0, 0.2, 0.8, 1]), to: "200px"});


</script>
Something went wrong with that request. Please try again.