The following example will change both the background-color and the position of the <div> element when the animation is at 25%, 50%, 75% and again when the animation is 100% complete:
@keyframes example {
0% {background-color: red; left:0px; top:0px;}
25% {background-color: yellow; left:200px; top:0px;}
50% {background-color: blue; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: red; left:0px; top:0px;}
}
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
/* The element to apply the animation to */ div { width: 100px; height: 100px; position: relative; 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; left:0px; top:0px;} 25% {background-color: yellow; left:200px; top:0px;} 50% {background-color: blue; left:200px; top:200px;} 75% {background-color: green; left:0px; top:200px;} 100% {background-color: red; left:0px; top:0px;} } /* The animation code in Standard syntax*/ @keyframes example { 0% {background-color: red; left:0px; top:0px;} 25% {background-color: yellow; left:200px; top:0px;} 50% {background-color: blue; left:200px; top:200px;} 75% {background-color: green; left:0px; top:200px;} 100% {background-color: red; left:0px; top:0px;} } </style> <body> <div>I can change not only my COLOR, but my POSITION too!</div> </body> |
I can change not only my COLOR, but my POSITION too!
|
Note: This example does not work in Internet Explorer 9 and earlier versions.
