Animated Entrances in CSS

We’ll start with the foundation I used to make the animations, then move on to the flourishes I included, stagger animations, and apply them to HTML components, finally looking at how to do it all while respecting a user’s decreased motion preferences.

The fundamentals

The basic concept is to apply a simple CSS @keyframes animation to everything we wish to animate on page load. Let’s construct an element that fades in over half a second, moving from opacity: 0 to opacity: 1.

.animate {

 animation-duration: 0.5s;
 animation-name: animate-fade;
 animation-delay: 0.5s;
 animation-fill-mode: backwards;
}

@keyframes animate-fade {

 0% { opacity: 0; }
 100% { opacity: 1; }
}

It’s also worth noting that there’s a half-second animation delay in there to give the remainder of the site time to load. The animation-fill-mode: the backward property is used to ensure that our initial animation state is enabled when the page is loaded. If we don’t do this, our animated component will appear before we want it to.

Animations that are more complex

It’s far more enjoyable to deal with a variety of animations than just one or two. To make more animations, we don’t even need to construct a bunch of new @keyframes. It’s simple enough to design new classes where all we modify is which frames the animation consumes while maintaining the same timing. There are virtually innumerable CSS animations available. (An extensive collection may be found at animate.style.) CSS transforms, as well as filters like a blur(), brightness(), and saturate(), can be utilized to produce even more variants. But for now, let’s begin with a new animation class that makes an element “pop” into position using a CSS transform.

.animate.pop {

 animation-duration: 0.5s;
 animation-name: animate-pop;
 animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
}

@keyframes animate-pop {

0% {
 opacity: 0;
 transform: scale(0.5, 0.5);
}

100% {
 opacity: 1;
 transform: scale(1, 1);
 }

Adding pauses

We can improve! We can animate items so that they appear at different times, for example. This provides a stagger that gives the illusion of intricate motion without requiring a considerable lot of code. This animation, which uses a CSS filter and a CSS transform, and is staggered by roughly a tenth of a second, feels pretty lovely. We did develop a separate class for each element that uses animation-delay values that are only a tenth of a second apart from space when the elements start animating.

.delay-1 { animation-delay: 0.6s; }
.delay-2 { animation-delay: 0.7s; }
.delay-3 { animation-delay: 0.8s; }

Taking into account accessibility preferences

Let's be good online citizens and disable our animations for visitors who have the decreased motion preference setting enabled:

@media screen and (prefers-reduced-motion: reduce) {

 .animate { animation: none !important; }

The animation will never load this way, and objects will usually appear. However, it's worth noting that "reduced" motion does not always imply "removed" motion.

Wrapping up

Of course, this is ridiculously entertaining. To me, these are the elements of a flexible and user-friendly system. It provides a considerable amount with a little, and it does it without a lot of added nonsense.

Other useful articles: