<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
div {
width: 50px;
height: 50px;
background: green;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation: animate 4s infinite;
animation: animate 4s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes animate {
from {
left: 500px;
}
to {
left: 0px;
}
}
@keyframes animate {
from {
left: 500px;
}
to {
left: 0px;
}
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"div1"
></
div
>
<
script
>
var x = document.getElementById("div1");
// Code for Chrome, Safari and Opera
x.addEventListener(
"webkitAnimationIteration", RepeatAnimation);
// Standard syntax
x.addEventListener(
"animationiteration", RepeatAnimation);
function RepeatAnimation(event) {
this.style.backgroundColor =
"lightgreen";
this.innerHTML = "Elapsed time: "
+ event.elapsedTime + " seconds";
}
</
script
>
</
body
>
</
html
>