CSS @keyframes is used to define the various stages and changes of animations. 1) Basic use: define animations through @keyframes, such as fadeIn changing from transparent to opaque. 2) Loop animation: Use the infinite keyword to create continuous rotation effects. 3) Performance optimization: Use the will-change attribute to improve animation fluency. 4) Accessibility: Adjust animations to suit user preferences through prefers-reduced-motion media query. 5) Flexible control: combine CSS variables to achieve color change animation. 6) Adjust the effect: Make the animation more natural by modifying the duration and timing-function.

The CSS @keyframes rule is the core of animation, which defines the various stages and changes of animation. In this article, we will dive into how to use @keyframes to create rich animation effects, not just simple transitions, but also some complex application scenarios and best practices.

When it comes to the application of @keyframes , we need to consider its importance in modern web design. Animation is not only a visual decoration, but also an important means to enhance user experience. With @keyframes we can precisely control the changes of elements on the timeline, resulting in smooth and compelling animation effects.

Let's start with a simple example to illustrate the basic usage of @keyframes :

 @keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 2s ease-in;
}

In this example, we define an animation called fadeIn , which gradually changes from completely transparent ( opacity: 0 ) to completely opacity ( opacity: 1 ). We then apply this animation to an element with a class fade-in , set the animation duration to 2 seconds, and use ease-in as the transition effect.

Now, let's explore more in-depth @keyframes ' usage tips and some advanced applications.

First, we can use @keyframes to create loop animations, which is very useful when creating load indicators or background animations:

 @keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loading-spinner {
  animation: spin 1s linear infinite;
}

In this example, the spin animation causes the elements to rotate continuously, and the infinite keyword ensures that the animation loops infinitely. linear ensures constant rotation speed and does not have the effect of acceleration and deceleration like ease-in .

When using @keyframes , we also need to pay attention to the performance of animations. Too much complex animation can lead to page performance degradation, especially on mobile devices. To optimize performance, we can use will-change attribute to prompt the browser which properties will change, so as to prepare in advance:

 @keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.slide-in {
  will-change: transform;
  animation: slideIn 0.5s ease-out;
}

Here, we use will-change: transform to tell the browser that transform attribute will change, which helps improve the smoothness of the animation.

Another aspect to consider is the accessibility of animations. Animation can cause discomfort among some users, especially those with epilepsy or dysmotic disorders. To do this, we can use prefers-reduced-motion media query to detect user preferences and adjust the animation accordingly:

 @keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 2s ease-in;
}

@media (prefers-reduced-motion: reduce) {
  .fade-in {
    animation: none;
  }
}

With this setting, our animations will be disabled when the user enables the Reduce Motion option, thus improving the accessibility of the web page.

In actual projects, I found that @keyframes can be used in conjunction with CSS variables (Custom Properties) to achieve more flexible animation control. For example, we can define an animation of color changes and use CSS variables to control the color:

 :root {
  --start-color: #ff0000;
  --end-color: #00ff00;
}

@keyframes colorChange {
  from {
    background-color: var(--start-color);
  }
  to {
    background-color: var(--end-color);
  }
}

.color-change {
  animation: colorChange 3s ease-in-out infinite alter;
}

In this example, we use CSS variables to define the start and end colors of the animation, so that the animation effect can be easily adjusted without modifying the @keyframes rule.

Finally, I want to share a problem I have encountered: When using @keyframes , if the animation lasts too short, it may cause the animation to look not smooth enough. To solve this problem, I usually adjust the duration of the animation and try different timing-function to find the best results:

 @keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.bounce {
  animation: bounce 0.8s ease-in-out infinite;
}

In this example, I found that setting the animation time to 0.8 seconds and using ease-in-out as the timing function makes the bounce effect more natural and smooth.

In general, @keyframes is a powerful and flexible tool in CSS, through which we can create a variety of complex and compelling animation effects. Through the introduction and examples of this article, I hope you can better understand how @keyframes is used and flexibly apply these techniques in real projects.

The above is the detailed content of @keyframes CSS: Best code examples. For more information, please follow other related articles on the PHP Chinese website!