CSS3 key frame animation is a commonly used technology in web design. By using the key frame animation function of CSS3, various forms of animation effects on web pages can be realized, such as fade in and fade out, slide, rotate, zoom, etc. These animation effects can be Make web pages more lively and interesting, attract users' attention, and improve user experience.
In this article, we will introduce the principle and usage of CSS3 key frame animation, and provide some examples and best practices to help readers better grasp this technology.
First, the principle of CSS3 key frame animation
CSS3 key frame animation is an animation technology based on CSS3. It defines a series of key frames in CSS to control the motion track, transparency, rotation angle and other attributes of elements to achieve animation effects. CSS3 key frame animation is implemented based on the concept of "key frame". A key frame defines the state of an element in the animation sequence, including its position, transparency, rotation angle and other attributes. Between the keyframes, the browser will automatically calculate the state of the element at each moment according to the animation attribute difference between the keyframes, so as to achieve a smooth animation effect.
Here's an example of a simple CSS3 keyframe animation that implements a rotating square:
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.square {
width: 100px;
height: 100px;
background-color: red;
animation: rotate 2s linear infinite;
}
In this example, we define a keyframe animation named "rotate", which contains two keyframes, corresponding to the start and end states of the animation sequence. In the initial state (0%), the rotation angle of the element is 0 degrees, and in the end state (100%), the rotation angle of the element is 360 degrees, thus achieving a complete rotation animation effect. Next, we apply this keyframe animation to a square element, using the "animation" attribute to specify parameters such as the animation name, animation duration, and animation type. In this example, we set the animation duration to 2 seconds, the animation type to "linear", that is, uniform motion, and also set the "infinite" parameter, indicating that the animation is played in a loop.
2. How to use CSS3 key frame animation
The method of using CSS3 key frame animation is relatively simple, mainly divided into the following steps:
- Define keyframe animation
In the CSS style sheet, the keyframe animation is defined by the "@keyframes" keyword, and the percentage value (0% ~ 100%) of the keyframe can be specified, and the attribute value of the element can be defined in each keyframe. The percentage value of the keyframe represents the progress of the animation sequence, for example, 0% represents the start state of the animation sequence, and 100% represents the end state of the animation sequence. In each keyframe, various attribute values of the element can be specified, such as position, transparency, rotation angle, etc.
Here's an example that defines a simple keyframe animation that moves a square element from its left edge to its right edge:
@keyframes move {
0% {
left: 0;
}
100% {
left: 100%;
}
}
In this example, we define a keyframe animation named "move", which contains two keyframes, corresponding to the start and end states of the animation sequence. In the starting state (0%), the value of the "left" attribute of the element is 0, that is, the element is on the left edge; while in the end state (100%), the value of the "left" attribute of the element is 100%, that is, the element moves to the right edge. This implements a simple moving animation from left to right.
- Apply keyframe animation
In a CSS style sheet, keyframe animations can be applied to specified elements through the "animation" property. To use the "animation" attribute, you need to specify parameters such as animation name, animation duration, and animation type.
Here's an example that applies the "move" keyframe animation defined above to a square element:
.square {
width: 100px;
height: 100px;
background-color: red;
animation: move 2s linear infinite;
}
In this example, we apply the "move" keyframe animation to an element named "square", and specify the animation duration as 2 seconds, the animation type as "linear", that is, uniform motion, and set the "infinite ” parameter, indicating that the animation is played in a loop.
- Define animation transition effects
CSS3 key frame animation can also define transition effects to allow elements to smoothly transition to the state of the next key frame in the animation sequence. In the CSS style sheet, you can use the "transition" attribute to define the transition effect, and you need to specify parameters such as the transition attribute, transition duration, and transition type.
Here's an example that defines a simple animated transition that smoothly transitions an element's position and transparency through an animation sequence:
.square {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 1s ease;
}
.square:hover {
top: 100px;
left: 100px;
opacity: 1;
}
In this example, we define an element called "square", which contains some basic properties, such as width, height, background color, etc. At the same time, we set the position of the element to absolute positioning. In the initial state, the position of the element is in the upper left corner, and set the transparency to 0 to make the element invisible. In the "transition" attribute of the element, we use the "all" keyword, which means to transition all the attributes of the element, specify the transition duration as 1 second, and the transition type as "ease", that is, the transition of slowly entering and exiting the animation Effect.
Next, we define the element's position and opacity property values in the ":hover" state of the "square" element. In this state, the position of the element will move to the position of (100px, 100px), and the transparency will become 1, making the element gradually visible. During this process, CSS3 will automatically calculate the intermediate state of the element and smoothly transition to the next state.
By defining animation transition effects, you can make the animation smoother and more natural, increasing user experience and visual effects.
4. Application scenarios of CSS3 animation
CSS3 key frame animation has a wide range of application scenarios in web development, such as:
- Realize animation effects of web page elements, such as transition, scaling, rotation, movement, etc., to enhance user experience and visual effects.
- Realize the animation effects of icons and buttons, making it easier for users to understand and operate page functions.
- Realize the animation effect of the data visualization chart, making the data more vivid and intuitive.
- Implement page interaction animation effects, such as pop-up boxes, prompt boxes, drop-down menus, etc., to increase interactivity and responsiveness.
Summarize:
CSS3 key frame animation is a powerful web animation technology. By specifying the percentage value and attribute value of the key frame, various animation effects can be created. When applying key frame animation, various parameters and transition effects of the animation can be controlled through the "animation" property and the "transition" property. CSS3 key frame animation has a wide range of application scenarios in web development, which can add vividness and interactivity to the page, and improve user experience and visual effects.