When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times. To get an animation to work, you must bind the animation to an element. The syntax to do this:
div {animation-name: example; animation-duration: 4s;}
The following example binds the "example" animation to the <div> element, setting it to last for 4 seconds. The animation changes the background-color of the element from red to yellow. We have specified when the style will change by using the keywords "from" and "to", which represents 0% (start) and 100% (complete):
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
/* The element to apply the animation to */ div { width: 100px; height: 100px; background-color: red; padding:5px; -webkit-animation-name: example; /* Chrome, Safari, Opera */ -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ animation-name: example; animation-duration: 4s; } /* The animation code for Chrome, Safari, Opera */ @-webkit-keyframes example { from {background-color: red;} to {background-color: yellow;} } /* The animation code in Standard syntax */ @keyframes example { from {background-color: red;} to {background-color: yellow;} } </style> <body> <div>Watch me at work!</div> <p><b>Note:</b> When an animation is finished, it changes back to its original style. It does not repeat, unless you hit the browser's refresh button.</p> </body> |
Watch me at work!
Note: When an animation is finished, it changes back to its original style. It does not repeat, unless you hit the browser's refresh button. |
Note: If the animation-duration property is not specified, the animation will have no effect, because the default value is 0.
