It is also possible to use percent. By using percent, you can add as many style changes as you like:
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
The following example will change the background-color of the <div> element when the animation is at 25%, 50% and again at 100% complete:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
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 { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} } /* The animation code in Standard syntax*/ @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} } /* The element to apply the animation to */ </style> <body> <div>This animation is all about percentages.</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> |
This animation is all about percentages.
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: This example does not work in Internet Explorer 9 and earlier versions.
