35 lines
793 B
HTML
35 lines
793 B
HTML
<style>
|
|
@-webkit-keyframes bounce {
|
|
from {
|
|
-webkit-transform: translate3d(0,0,0);
|
|
}
|
|
to {
|
|
-webkit-transform: translate3d(200px,0,0);
|
|
}
|
|
}
|
|
|
|
#animator {
|
|
position: relative;
|
|
top: 0px;
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: blue;
|
|
-webkit-animation-name: bounce;
|
|
-webkit-animation-duration: 80ms;
|
|
-webkit-animation-iteration-count: infinite;
|
|
}
|
|
</style>
|
|
<script>
|
|
function sawIterationInChild() {
|
|
// Tell our parent that we animated.
|
|
window.parent.sawIteration();
|
|
}
|
|
|
|
function startTest() {
|
|
var animator = document.getElementById("animator");
|
|
animator.addEventListener("webkitAnimationIteration", sawIterationInChild, false);
|
|
}
|
|
window.addEventListener("load", startTest, false);
|
|
</script>
|
|
<div id="animator"></div>
|