In a nutshell, CSS describes how HTML elements appear on a webpage.They can be static (nonmoving) or animated.
CSS animation is executed by creating a series of elements that gradually change from one style to another. There’s no limit to the number of times you can set an element to transition, but you do have to define which CSS properties to change.
Some animation properties that you have the ability to modify are color, background, and motion. These may not seem like much, but when you put everything together, the possibilities are endless.
To create a CSS animation, you must first understand keyframes and animation properties.
@Keyframes are the foundation of CSS animations. They indicate the start and end of the animation and describe how each element should behave at each stage of the animation.
Animation properties pair CSS elements with @keyframes to further establish the nature of the animation.
There are several other additional animation properties that you’ll want to get familiar with as you learn more about CSS animation, but the rest of this article will focus on how to use CSS animation delay.
CSS Animation Fade-In Delay
The animation-delay property sets how much time will pass before the animation starts. It’s expressed in seconds and milliseconds.
This property has three predefined values: time, initial, and inherit.
First, <time> sets a certain number of seconds or milliseconds before the animation starts. When the value is positive, such as 2s or 500ms, the animation begins after that amount of time has passed.
When the value is negative, the animation begins as if it’s been playing for the specified amount of time. For instance, when the value is animation-delay: -2s, the animation begins immediately, but two seconds into the sequence.
Second, <initial> returns the property to the default value for the element.
Third, <inherit> turns the property into a child of the parent element.
For any animation, you’ll also want to define animation-duration and animation-name. As you might expect, animation-duration defines how long the animation will run and animation-name creates an individual reference point for a particular animation.
Here are a few straightforward CSS animation delay code examples:
1. Animation that starts after 300ms
2. Animation that starts after -300ms
You can also test out CSS animation delay CSS code for yourself with this working CodePen example or simply view the different animation delay options below.
Animation Delay: 1s
Animation Delay: -1s
CSS Animation Delay Between Iterations
Animation delays are especially useful when you want to set your animation to delay between iterations or fade in.
While there are no specific properties for "CSS animation delay between iterations" or "CSS animation fade-in delay", you can certainly achieve these effects by combining animation-delay with the other animation properties such as:
animation-timing-function: Defines the speed of the animation. Predefined values for this property include: ease, ease-in, ease-out, ease-in-out, linear, initial, and inherit.
animation-iteration-count: Sets how many times the animation will play. The value can be: #, infinite, initial, or inherit. You can set CSS animation delay between iterations for a period of time when the animation delays before it starts playing again. This is useful when you want the animation to run multiple times but also want to create a pause between each iteration. You can achieve this by declaring the animation multiple times with a specific animation-delay for each.
animation-direction: Defines the animation’s direction when triggered. The value can be normal, reverse, alternate, or alternate-reverse.
animation-fill-mode: Sets which animation styles apply before or after the animation duration. Values include: backwards, forwards, both, and normal.
animation-play-state: Defines the state of the animation (i.e. playing or paused).
The top block is ease-in, the bottom is ease-in-out. Try cubic-bezier.com yourself to see how timing functions compare.
To apply the fade-in effect, use the <div class="fade-in"> tag.
There are many creative ways to style your animations, some of which you can only achieve after you have mastered the basics.
CSS Animation Delay
When done well, CSS animations can provide a valuable interface for interaction and gathering feedback on important issues. They can also enhance the customer experience and add personality to your brand.
There are many more amazing things to do with CSS and its counterpart HTML. It’s not only exciting to tinker with the tools, but the skills you learn will help you design more effective online marketing materials.
Originally published May 15, 2020 3:37:19 PM, updated May 15 2020