A Handy Little System for Animated Entrances in CSS

A website is not just a static document, some details can make the website more vivid and interesting. What if the web page content is not displayed directly, but appears in a pop-up, slide, fade-in or rotated way? While such animations are not always practical, in some cases they can attract users' attention to specific elements, strengthen distinctions between elements, and even indicate state changes, so they are not completely useless.

So I created a set of CSS tools to add animation effects to an element when it enters the field of view. Yes, this is completely pure CSS implementation. It not only provides multiple animations and variants, but also supports the interleaving effect of animations, which can be almost like creating a scene.

For example, like this:

This is really just a simplified version of this more advanced version:

We first explain the basics of creating animations, then introduce some of the details I added, how to interleave animations, and how to apply them in HTML elements, and finally, we will see how to achieve all of this with respect to the user's reduced movement preferences.

Basic knowledge

The core idea is to add a simple CSS @keyframes animation, apply it to whatever we want to animate the page when it loads. Let's let an element fade in and change from opacity: 0 to opacity: 1 in half a second:

.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; }
}

Please note that there is also a 0.5-second animation-delay here to allow the rest of the website to load first. animation-fill-mode: backwards is used to ensure that our initial animation state is active when the page is loading. Without this, our animation elements will pop up before we want to.

If we are lazy, we can stop here. However, CSS-Tricks readers certainly won't be lazy, so let's see how to use a system to improve this kind of thing.

More cool animations

It's more fun to have a variety of animations than just using one or two animations. We don't even need to create a bunch of new @keyframes to make more animations. Creating a new class is very simple, we just need to change the frames used by the animation and keep it the same for all times.

The number of CSS animations is almost unlimited. (See animate.style, which is a huge collection.) CSS filters such as blur() , brightness() , and saturate() , and of course CSS transformations can also be used to create more variants.

But now, let's start with a new animation class that uses CSS transformation to make the element "pop up" into place.

.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);
  }
}

I added a small cubic-bezier() time curve from Lea Verou's indispensable cubic-bezier.com for a resilient rebound effect.

Add delay

We can do better! For example, we can make elements animate at different times. This creates an interleaving effect, creating complex-looking motions without the need for a lot of code.

This feels great using CSS filters, CSS conversions and an interleaved animation of about one tenth of a second on three page elements:

All we do is create a new class for each element that separates the time the element starts to animation, using animation-delay value that is one tenth of a second apart.

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

Everything else is exactly the same. Remember that our base latency is 0.5s, so these helper classes start counting from there.

Respect the accessibility preferences

Let's be excellent web citizens and remove animations for users who have enabled reduced sports preferences:

@media screen and (prefers-reduced-motion: reduce) {
  .animate { animation: none !important; }
}

In this way, the animation will not load and the elements will enter the field of view as normal. "Reduce" movement does not always mean "removal" movement, which is worth reminding.

Apply animation to HTML elements

So far we've looked at the basic animation as well as a slightly more advanced one, which we can make it more advanced with interleaved animation delays (included in the new class). We also see how to respect users’ sports preferences at the same time.

Although there are real-time demonstrations that show these concepts, we don't actually cover how to apply our work to HTML. The cool thing is that we can use it on almost any element, whether it's div, span, article, header, section, table, form...you know.

What we are going to do is: we want to use our animation system on three HTML elements, each of which gets three classes. We can hardcode all the animation code to the element itself, but splitting it allows us to get a reusable animation system.

• .animate: This is the base class that contains our core animation declarations and time.
• Animation type: We will use the previous "pop-up" animation, but we can also use fade-in animation. This class is technically optional, but it is a great way to apply different movements.
• .delay- : As mentioned earlier, we can create different classes to interleave the time the animation starts on each element, resulting in a neat effect. This class is also optional.

So our animation elements may now look like this:

<h2 id="One"> One!</h2>
<h2 id="Two">Two!</h2>
<h2 id="Three">Three!</h2>

Let's count them!

in conclusion

Check it out: We start with a seemingly basic set @keyframes and turn it into a complete system for applying interesting animations for elements entering the field of view.

This is of course very interesting. But the biggest takeaway for me is that the examples we see form a complete system that can be used to create baselines, different types of animations, interleaving delays and respecting user motion preferences. For me, these are all the elements of a flexible and easy-to-use system. It gave us a lot with very little stuff without a bunch of extra scraps.

What we cover really can be a complete animation library. But of course I didn't stop there. I've provided all my CSS animation files to you. There are several animation types in it, including 15 classes with different delays, which can be used to interleave things. I've been using these in my own projects, but this is still an early version and I'd love to receive feedback about it. Please enjoy and let me know what you think in the comments!

/* ========================================================================================================
Animation System by Neale Van Fleet from Rogue Amoeba
=============================================================================================*/
.animate {
  animation-duration: 0.75s;
  animation-delay: 0.5s;
  animation-name: animate-fade;
  animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
  animation-fill-mode: backwards;
}

/* Fade In */
.animate.fade {
  animation-name: animate-fade;
  animation-timing-function: ease;
}

@keyframes animate-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Pop In */
.animate.pop { animation-name: animate-pop; }

@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/* Blur In */
.animate.blur {
  animation-name: animate-blur;
  animation-timing-function: ease;
}

@keyframes animate-blur {
  0% {
    opacity: 0;
    filter: blur(15px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}

/* Glow In */
.animate.glow {
  animation-name: animate-glow;
  animation-timing-function: ease;
}

@keyframes animate-glow {
  0% {
    opacity: 0;
    filter: brightness(3) saturate(3);
    transform: scale(0.8, 0.8);
  }
  100% {
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: scale(1, 1);
  }
}

/* Grow In */
.animate.grow { animation-name: animate-grow; }

@keyframes animate-grow {
  0% {
    opacity: 0;
    transform: scale(1, 0);
    visibility: hidden;
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

/* Splat In */
.animate.splat { animation-name: animate-splat; }

@keyframes animate-splat {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(20deg) translate(0, -30px);
    }
  70% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg);
  }
  85% {
    opacity: 1;
    transform: scale(1.1, 1.1) rotate(15deg) translate(0, -10px);
  }

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

/* Roll In */
.animate.roll { animation-name: animate-roll; }

@keyframes animate-roll {
  0% {
    opacity: 0;
    transform: scale(0, 0) rotate(360deg);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1) rotate(0deg);
  }
}

/* Flip In */
.animate.flip {
  animation-name: animate-flip;
  transform-style: preserve-3d;
  perspective: 1000px;
}

@keyframes animate-flip {
  0% {
    opacity: 0;
    transform: rotateX(-120deg) scale(0.9, 0.9);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg) scale(1, 1);
  }
}

/* Spin In */
.animate.spin {
  animation-name: animate-spin;
  transform-style: preserve-3d;
  perspective: 1000px;
}

@keyframes animate-spin {
  0% {
    opacity: 0;
    transform: rotateY(-120deg) scale(0.9, .9);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg) scale(1, 1);
  }
}

/* Slide In */
.animate.slide { animation-name: animate-slide; }

@keyframes animate-slide {
  0% {
    opacity: 0;
    transform: translate(0, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* Drop In */
.animate.drop {
  animation-name: animate-drop;
  animation-timing-function: cubic-bezier(.77, .14, .91, 1.25);
}

@keyframes animate-drop {
0% {
  opacity: 0;
  transform: translate(0,-300px) scale(0.9, 1.1);
}
95% {
  opacity: 1;
  transform: translate(0, 0) scale(0.9, 1.1);
}
96% {
  opacity: 1;
  transform: translate(10px, 0) scale(1.2, 0.9);
}
97% {
  opacity: 1;
  transform: translate(-10px, 0) scale(1.2, 0.9);
}
98% {
  opacity: 1;
  transform: translate(5px, 0) scale(1.1, 0.9);
}
99% {
  opacity: 1;
  transform: translate(-5px, 0) scale(1.1, 0.9);
}
100% {
  opacity: 1;
  transform: translate(0, 0) scale(1, 1);
  }
}

/* Animation Delays */
.delay-1 {
  animation-delay: 0.6s;
}
.delay-2 {
  animation-delay: 0.7s;
}
.delay-3 {
  animation-delay: 0.8s;
}
.delay-4 {
  animation-delay: 0.9s;
}
.delay-5 {
  animation-delay: 1s;
}
.delay-6 {
  animation-delay: 1.1s;
}
.delay-7 {
  animation-delay: 1.2s;
}
.delay-8 {
  animation-delay: 1.3s;
}
.delay-9 {
  animation-delay: 1.4s;
}
.delay-10 {
  animation-delay: 1.5s;
}
.delay-11 {
  animation-delay: 1.6s;
}
.delay-12 {
  animation-delay: 1.7s;
}
.delay-13 {
  animation-delay: 1.8s;
}
.delay-14 {
  animation-delay: 1.9s;
}
.delay-15 {
  animation-delay: 2s;
}

@media screen and (prefers-reduced-motion: reduce) {
  .animate {
    animation: none !important;
  }
}

The above is the detailed content of A Handy Little System for Animated Entrances in CSS. For more information, please follow other related articles on the PHP Chinese website!