Want to add a quick win to your webpage's load that adds that little bit of style? Read on to find out how you can use CSS animations with a delay to highlight that hero text or CTA to get the attention of your site visitor.
CSS Animations are straightforward to use and provide all the properties you need to make any animation you like. Most of the time, you'll need to combine them with a little JavaScript to trigger them, but if your element will be seen on page load, you can use a delay. Let's take a look.
The Anatomy of CSS Animations
CSS Animations have two parts: the control or style for the element and the timeline.
The Control Style
The style is added to the element and is made of the animation property and values.
The animation property comprises multiple properties as listed below:
- animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timeline
animation-timing-function
You can either use the properties separately or you can use the shorthand animation property as illustrated in the following code.
.element-to-animate {
animation-duration: 750ms;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
animation-delay: 1500ms;
animation-name:slide-up;
}The following is the same, but using the shorthand.
.element-to-animate {
animation: 750ms forwards ease-out 1500ms slide-up;
}In the example, we will look at a few of the properties, but if you want detailed information on each property, please visit the MDN CSS animation page.
The @keyframe timeline
The timeline is set using keyframes inside the @keyframe at-rule.
The at-rule can have as many keyframes as you like. Key-frames are set using percentages. However, for the start and finish, you can use the from and to aliases.
Here is a basic example of what a timeline could look like:
@keyframes slide-up {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}For our page load title animation, we only need the start frame and end frame.
Creating a page load CSS animation
If you check the animation, you will see that it plays after the page has fully loaded. This is as simple as using the animation-delay property. I set it to 1500ms or 1.5 seconds; this gives enough time for the page to have fully loaded before the title animates in.
.element-to-animate {
animation: 750ms forwards ease-out 1500ms slide-up;
opacity: 0;
}One thing to note is that you need to add the opacity to the element, as well as in the at-rule. If you don't, the element will be opaque to start, then after the delay, it will go to no opacity (transparent) and then be animated in.
The same would be true for the transform property, but since the element is transparent to start, you don't see the translate happen.
Another property that you need to use is the animation-fill-mode, and set it to forward. This makes the animation remain at the 100% style that is set once it has finished.
Then I added an ease; using ease-out is good for an in animation, and ease-in is good for a leaving animation. I know that sounds counter-intuitive, but we are talking about how the ease works, which is a speed gradient, so ease-out slows downs at the end, and ease-in is slow at the start.
The last property is the name. This is what we use for our at-rule name.
When you use the shorthand property, the order is: duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name.
Here is the full code for the hero. You can see I have added all the other styles that aren't animated to the element.
.field--name-field-heading {
animation: 750ms forwards ease-out 1500ms slide-up;
opacity: 0;
position: absolute;
z-index: 99;
top: 50%;
left: 24px;
font-size: 38px;
font-weight: 700;
line-height: 1.2;
width: 320px;
mix-blend-mode: difference;
color: aliceblue;
}
@keyframes slide-up {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}Keep the movement smooth and small
You will notice that the animation looks subtle. This is because the full animation only moves 50px. I would recommend not using big movements, and also keep the elements contained within their parent. By that, I mean in the example of the hero, don't animate the title from outside the hero into it. Animation best practices are beyond the scope of this article. so I will leave it at that for now.
Conclusion
In this article, we have looked at using the animation-delay property so that a small animation can be applied to the title in the hero after the page has fully loaded. We have also looked at a few other properties and animation concepts to make the animation look smooth and unobtrusive, while at the same time giving some emphasis to the title.
I hope you enjoyed this article. By signing up for my newsletter, you can explore more interesting content on creating remarkable user experiences with JavaScript and other technologies and frameworks. The newsletter is on the intersection of design and front-end development. Sign up below.
Until next time, seize the day!