Animations have much more complex potential than transitions. Our example on the previous page basically just had a start and an end. But animations are able to have as many steps as you would like, and you can set when in the animation each step will occur. To do this, we can use percentages instead of the from and to keywords.
When setting percentages, everything works relative to the animation duration you had set. Let's think of an animation that is set to last 10 seconds, and we set its steps to be 0%, 50%, and 100%. This translates to starting off with step 1, animating toward step 2 by 5 seconds in, and then animating toward step 3 by the end.
The closer the percentages between steps, the faster those animation stages will be. If we had steps set to 50% and 60% in our 10 second animation, that part would only last 1 second! So as you list out your animation steps, take this into consideration to achieve different effects. In the example below, watch how much faster the font changes from 40px to 20px than it does from 60px to 40px.
|
<style> @keyframes myAnimation { 0% { color: #CCCCFF; } 70% { color: #000000; } 100% { color: #000000; } } div { animation-name:myAnimation; animation-duration:3s; } </style> |
|
Changing font sizes.
|
Of course, animations aren't limited to one property at a time. You can involve multiple properties by adding them in the curly braces like you would in any other CSS declaration block. But there are a couple things you should keep in mind as you plan out an animation with multiple properties.
If you want to animate one property only in the first step, you will need to repeat that declaration in all remaining steps of that property will reset to its original value.
|
@keyframes anim1 { |
@keyframes anim2 { |
|
Div2
|
Div2
|
If you want to animate one step quickly, but then delay the next change, add another step in between with the same declaration—this is sort of like a pause for that property in your animation.
|
@keyframes rotate1 { |
@keyframes rotate2 { |
|
Div2
|
Div2
|
