Introduction to the usage of CSS @keyframes

1. Overview

The CSS @keyframes rule is an essential tool for creating animation effects. By using the @keyframes rule, we can define a series of keyframes and then apply them to elements, creating smooth animations. This article will provide a detailed introduction to the use of CSS @keyframes, including keyframe definitions, animation properties, and common application scenarios.

2. Basic Syntax of @keyframes Rules

The basic syntax of @keyframes rules is as follows:

@keyframes animation-name { 
keyframes-selector { 
/* Keyframe style properties */ 
} 
/* Multiple keyframes can be defined */ 
} 

animation-name gives the animation a name, which can be applied to an HTML element using the animation-name attribute. keyframes-selector defines the keyframes, which can be a percentage value (e.g., 0%, 50%, 100%), or a from (equivalent to 0%) and to (equivalent to 100%).

Keyframe style properties can be any CSS properties, such as width, height, opacity, etc. We can freely define them as needed.

The following is a simple example demonstrating how to create an animation effect using the @keyframes rule:

@keyframes example-animation {
0% {
background-color: red;
}
50% {
background-color: yellow;
}
100% {
background-color: green;
}
}

3. Controlling Animation Properties

The @keyframes rule allows you to use multiple keyframes to create animation effects by gradually changing the style properties of the keyframes. When defining keyframes, you can set the values ​​of multiple properties to achieve different effects.

3.1. Using Percentage Values ​​to Control Keyframes

In the @keyframes rule, you can use percentage values ​​to control the changes in keyframes, thereby controlling the animation effect. For example, we can set keyframes from 0% to 100% to gradually change the color of an element:

@keyframes example-animation {
0% {
background-color: red;
}
50% {
background-color: yellow;
}
100% {
background-color: green;
}
}

By setting percentage values ​​for keyframes, we can achieve a smooth color transition during the animation.

3.2. Using the from and to Keywords

In addition to using percentage values, we can also use the from and to keywords to define keyframes. The from keyword is equivalent to 0%, and the to keyword is equivalent to 100%. This makes the code more concise and clear.

For example, we can rewrite the example animation above as follows:

@keyframes example-animation {
from {
background-color: red;
}
to {
background-color: green;
}
}

By using the from and to keywords, we can more intuitively control the animation effects of an element.

3.3. Using Keyframe Names

After defining the @keyframes rule, we need to apply the animation to a specific element. To do this, we can use the animation-name attribute to apply the keyframe name to the element.

.my-element {
animation-name: example-animation;
}

Where .my-element is the selector of the element to which the animation is applied.

3.4. Other Animation Properties

In addition to the animation-name property, we can also use other animation properties to control animation effects. The following are some commonly used animation properties:

• animation-duration: Defines the time it takes for the animation to complete one cycle, in seconds or milliseconds.
• animation-timing-function: Defines the animation’s timing curve, controlling the speed of the animation’s transitions between keyframes.
• animation-delay: Defines the delay before the animation starts, in seconds or milliseconds.
• animation-iteration-count: Defines the number of times the animation will play.
• animation-direction: Defines the direction in which the animation loops.

By setting these properties, we can more precisely control the animation’s effects.

4. Application Scenarios

CSS The @keyframes rule is widely used for animation effects in web development. Here are some common application scenarios:

4.1. Button Hover Effect

For button hover effects, you can use the @keyframes rule to create keyframes and implement hover animations by changing style attributes like the button’s color and border. For example, when the mouse hovers over a button, the button’s color gradually changes and a shadow appears.

@keyframes button-hover { 
from { 
background-color: transparent; 
box-shadow: none; 
} 
to { 
background-color: #f0f0f0; 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
} 
} 

.button:hover { 
animation-name: button-hover; 
animation-duration: 0.2s; 
animation-timing-function: ease-in-out; 
animation-fill-mode: forwards; 
} 

4.2. Text Gradient Effects

By using the @keyframes rule, we can achieve text gradient effects. For example, we can make text gradually appear from transparent to opaque, or from left to right.

@keyframes text-fade-in { 
from { 
opacity: 0; 
transform: translateX(-100%); 
} 
to { 
opacity: 1; 
transform: translateX(0); 
} 
} 

.text { 
animation-name: text-fade-in; 
animation-duration: 1s; 
animation-timing-function: ease-in-out; 
animation-fill-mode: forwards; 
} 

4.3. Accordion Effect

The accordion effect is when multiple folding panels exist at the same time, with only one panel expanding at a time. By using the @keyframes rule, we can achieve the panel expansion animation in the accordion effect.

@keyframes accordion-expand {
from {
max-height: 0;
opacity: 0;
}
to {
max-height: 100px;
opacity: 1;
}
}

.accordion-panel {
animation-name: accordion-expand;
animation-duration: 0.3s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}

By properly adjusting the style properties of the keyframes, we can achieve different accordion effects.

Conclusion

By using the CSS @keyframes rule, we can create a variety of animation effects. Whether it’s a simple button hover effect or a complex accordion animation, you can achieve it by mastering the basic syntax and control methods of the @keyframes rule’s animation properties. In practice, we should pay attention to animation smoothness and performance optimization. Avoiding excessive keyframes and complex animation effects can reduce browser load, improve page loading speed and responsiveness.

Animation effects can also be further enhanced by combining them with other CSS properties and pseudo-class selectors. For example, setting properties like rotation and scale for elements in the @keyframes rule, combined with the :hover pseudo-class selector and the transition property, can create richer dynamic effects.

When using the @keyframes rule on mobile devices, it’s important to balance performance and animation smoothness to avoid excessive animation resource usage, resulting in page lag or rapid battery drain.

Overall, the CSS @keyframes rule provides us with a rich set of animation tools that can make web pages more vivid and engaging. During the design and development process, we can flexibly utilize the @keyframes rule, combined with other CSS features and techniques, to create unique and beautiful animation effects, providing users with a great interactive experience.