Friday, February 11, 2011

Infinite webkit keyframe animation

Here is a simple example of an infinite animation.

<head>
<style>
@-webkit-keyframes infinite-spinning {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}

#box {
-webkit-animation-name: infinite-spinning;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
width: 100px;
height: 100px;
background: #00f;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>

No comments:

Post a Comment