Like transitions, we can apply changes to delays and timing to our animation. But additionally, with animations, we can control the direction they play and how many times they play. Let's start with delays and timing since we've already been introduced to these with transitions.
The animation-delay and animation-timing-function properties work the same way as their transition counterparts. Animation-delay takes on a time value measured in a seconds, and will delay the start of an animation. Animation-timing-function will apply variations in speed to the animation using the keywords linear, ease, ease-in, ease-out, or ease-in-out.
|
<style> |
|
Div
|
Cubic-Bezier
Timing functions for both transitions and animations can also be defined with a parameter called cubic-bezier. This allows the use of four values to control the timing in ways the other keywords don't cover. Using cubic-bezier isn't required for this lesson, but if you are interested, you can look it up and explore further.
As mentioned near the start of this page, we can also alter the direction our animations play, as well as the number of repetitions we want. We have two more properties to handles these customizations: animation-direction and animation-iteration-count.
With animation directions, we really only can go forward or backward. But, this property can also alternate direction if our animations play for more than one loop. Check out the table below to see the values available and an explanation of each.
| normal | This is the default value. The animation will play forward as expected. |
| reverse | The animation will play its steps working backward from last to first. |
| alternate | As long as the animation plays more than once, the direction will keep switching between forward and backward. |
| alternate-reverse | This value functions just like alternate, except it will go in reverse first, then forward, and so on. |
As for looping our animations, we only need to indicate the number of times we desire. An iteration is basically a synonym for repetition, so the property name animation-iteration-count essentially translates to the number of repetitions in your animation. For this, we can use a number, or we can use the keyword "infinite" to indicate that the animation should loop endlessly. Click the button below this example to see the animation in action.
|
<style> |
|
Div
|
Did you notice in the example above with a finite number of loops that when it's finished, it resets back to its original state? We hadn't seen this yet because the examples in the lesson thus far looped infinitely. However, the default number of iterations is 1, so our animations will automatically reset when they're done. If we want an animation to do something different when it finishes, we have animation-fill-mode available. With this property, we can apply an animation's start values during a delay, or leave the ending properties in place when an animation finishes. Look over the table below to see the keywords available, and then check out some of them in action in the sample below that.
| none | This is the default value. No styles for the animation will be retained except for during the actual animation. |
| forwards | Property values will stay locked in after an animation finishes, instead of resetting to the original values. |
| backwards | The property values for the animation's beginning will be applied during an animation delay. |
| both | The features of both "forwards" and "backwards" will be applied. |
|
<style> |
|
none
backwards
forwards
|
