Introduction to CSS3 animation keyframes
Detailed explanation of the usage of @keyframes in CSS3:
This attribute is closely related to the animation attribute. For the animation attribute, please refer to the chapter Detailed explanation of the usage of animation attribute in CSS3.
1. Basic knowledge:
keyframes translated into Chinese means "key frames". If you have used flash, you should understand this better, but of course not There is no problem with flash either.
The transition animation effect can also be achieved using the transition attribute, but it is slightly rough because it cannot control the animation process more precisely. For example, it can only control the transition of a certain attribute overall within a specified time period, while the animation attribute You can use @keyframes to divide the animation within a specified time period more precisely.
Grammar structure:
@keyframes animationname {keyframes-selector {css-styles;}}Parameter analysis:
1.animationname: declares the name of the animation.
2.keyframes-selector: Used to divide the duration of animation, you can use percentage form, or you can use "from" and "to" forms.
The forms of "from" and "to" are equivalent to 0% and 100%.
It is recommended to always use percentage form.
2. Code example:
Example one:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:theanimation 5s infinite alternate;
-webkit-animation:theanimation 5s infinite alternate ;
-moz-animation:theanimation 5s infinite alternate ;
-o-animation:theanimation 5s infinite alternate ;
-ms-animation:theanimation 5s infinite alternate ;
}
@keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
@-moz-keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
@-o-keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
@-ms-keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>The above code implements a simple animation. Let’s do a brief analysis:
1. Use @keyframes definition Created an animation called theanimation.
2. The animation name declared by @keyframes must be used in conjunction with animation.
3.from to is equivalent to 0%-100%, so it is stipulated that one thing should be done within 5s.
Example 2:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:theanimation 4s infinite alternate;
-webkit-animation:theanimation 4s infinite alternate ;
-moz-animation:theanimation 4s infinite alternate ;
-o-animation:theanimation 4s infinite alternate ;
-ms-animation:theanimation 4s infinite alternate ;
}
@keyframes theanimation{
0%{top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
@-moz-keyframes theanimation{
0% {top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
@-webkit-keyframes theanimation{
0%{top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
@-o-keyframes theanimation{
0%{top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>In the above code, the animation duration is divided into percentages, stipulating that specified things should be done within the specified interval.
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
