Home > Article > Web Front-end > What is the usage of keyframes in css3
What is the usage of keyframes in css3
- WBOYOriginal
- 2021-12-15 17:36:108519browse
Keyframes in css are used to specify the animation actions of elements. It is a css rule for creating animations; the keyframe rule consists of the keyword "@keyframe" and the syntax is "@keyframes animation name {keyframes-selector{css -styles;}}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
What is the usage of keyframes in css3
This attribute is closely related to the animation attribute.
Keyframes translated into Chinese means "key frames". If you have used flash, you should understand this better. Of course, if you don't know flash, there will be no problem.
Using the transition attribute can also achieve the transition animation effect, but it is slightly rough because it cannot control the animation process more finely. For example, it can only overall control the transition of a certain attribute within a specified time period, and The animation attribute can use @keyframes to divide the animation within the specified time period more finely.
Syntax structure:
@keyframes animationname {keyframes-selector {css-styles;}}Parameter analysis:
animationname: declares the name of the animation.
keyframes-selector: Used to divide the duration of animation, you can use percentage form, or you can use "from" and "to" forms. The forms "from" and "to" are equivalent to 0% and 100%. It is recommended to always use percentage form.
The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:100px;
height:100px;
background-color:pink;
animation:fadenum 5s infinite;
}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Output result:
If you are interested, you can continue to visit:css video tutorial.
The above is the detailed content of What is the usage of keyframes in css3. For more information, please follow other related articles on the PHP Chinese website!