1document.getElementById("tunnel").animate([
2 // keyframes
3 { transform: 'translateY(0px)' },
4 { transform: 'translateY(-300px)' }
5], {
6 // timing options
7 duration: 1000,
8 iterations: Infinity
9});
10
1$ . sleutelframe . define ( {
2 naam : 'ball-roll' ,
3 van : {
4 'transform' : 'rotate (0deg)'
5 } ,
6 naar : {
7 'transform' : 'rotate (360deg)'
8 }
9} ) ;
1id = setInterval(frame, 5);
2
3function frame() {
4 if (/* test for finished */) {
5 clearInterval(id);
6 } else {
7 /* code to change the element style */
8 }
9}
1function startAnimation() {
2 var frameHeight = 102;
3 var frames = 15;
4 var frame = 0;
5 var div = document.getElementById("animation");
6 setInterval(function () {
7 var frameOffset = (++frame % frames) * -frameHeight;
8 div.style.backgroundPosition = "0px " + frameOffset + "px";
9 }, 100);
10}
11