What are CSS Animations?
In this article we are exploring CSS Delay Animation with an example, CSS (cascading style sheets) affects how HTML elements appear on a webpage as you can see our previous article. CSS styles can be static (nonmoving) or animated.
CSS animations works by directing one or more CSS properties of an element to change from one value to another. Some animation properties include background-color, size, and position on the page (to animate movement). These may not seem like much, but when you put everything together, you can get impressive results.
To create/Work with CSS animation, you must first understand @keyframes and animation properties.
@keyframes are the base of CSS animations. They indicate the start and end of the animation and describe how each component should behave at each stages of the animation.
Animation attributes pair CSS elements with @keyframes to further establish the nature of the animation.
There are several other added animation properties that you’ll require to get familiar with as you learn more about CSS animations, but the rest of this article will focus on how to use CSS animation-delay.
The CSS animation-delay property has the following syntax:
animation-delay: [time] | initial | inherit;
As you can see above, there are three values: time, initial, and inherit.
The first option is [time], which is the number of seconds or milliseconds before the CSS animation starts. When the value is positive, such as 1s or 500ms, the animation effect starts after that amount of time has passed.
If the value for [time] is negative, the CSS animation starts as if it’s been working for that amount of time. For instance, when the value is -1s, the animation effect begins immediately.
The second option, initial returns the property to the default value for the element.
Finally, inherit turns the property into a child of the parent element.
For any CSS animation, you’ll also want to define animation-duration and animation-name. As you might assume, animation duration defines how long the CSS animation will run. animation-name creates an individual reference point for a particular animation.
Example
See the Pen
css animation delay by Christina Perricone (@hubspot)
on CodePen.
CSS Animation Delay Between Loops
You may want to create an animation that reflects in between each loop. Unfortunately, animation delay only affects the start of the animation. Once the animation begins, it will loop without any delays. There are no properties for “CSS animation-delay between iterations” either.
Let’s say you want to create an animation that does the below following points:
- The element grows to 1.5x its original size in two seconds[Zoom In & Zoom Out]. In other words, The element shrinks and back down to its original size in the span of two seconds.
- The animation pauses for one second.
- The animation repeats[the cycle repeats in a loop].
- With some quick math, we can work out percentages for when each phase of the animation happens. In total, one loop persists five seconds (2 + 2 + 1). Therefore, the first step will take up the first 40% of the animation duration, then the second step will take up the next 40%, and the pause takes the final 20%.
- When we start to work our percentages into our @keyframes rules, it looks like this:
Example
See the Pen
css animation delay: pause between iterations by Christina Perricone (@hubspot)
on CodePen.
If you have any queries, please mention in the below comment box.
Happy Coding 😉
Add Comment