This article mainly introduces examples of CSS3 animation to achieve frame-by-frame animation effects. It has certain reference value. Interested friends can refer to it.
The animation attribute in css3 is very powerful, but you can I rarely use it. I was asked about it in an interview recently. I will make a short summary of animation while I have time now. At the same time, a demo of frame-by-frame animation is implemented as an exercise
List of animation attributes
Because there are many animation attributes, it is a bit painful to see it in w3c, so I just did it. A map, if you want to check it later, it will be clear at a glance
Use animation to achieve frame-by-frame animation
Be familiar with the properties of animation After that, I have to find a simple small project to implement. Frame-by-frame animation is so interesting. Let’s run one to satisfy myself first. The idea is very simple, which is to give the element a sprite background, and then add the frame animation to change the background-position. Key code:
@keyframes run{
from{
background-position: 0 0;
}
to{
background-position: -1540px 0 ;
}
}
p{
width:140px;
height:140px;
background: url(run.png) ;
animation-name：run;
animation-duration:1s;
animation-iteration-count:infinite;
}Copy after login
But after running, we found that the frame animation between each frame of animation is sliding, which is not what we want. effect, why?
It turns out that animation transitions in ease mode by default, which inserts tweening animation between each key frame, so the animation effect is consistent
It’s easy to solve if you know the reason. The solution is:
@keyframes run{
0%, 8%{ /*动作一*/ }
9.2%, 17.2%{ /*动作二*/ }
...
}Copy after login
#step1: Stay 8 frames between actions, 0% Set action one, end action one at 8%
#step2: Transition between actions 1.2 frames, 9.2% Set action two, action two ends at 17.2%
Complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3逐帧动画</title>
<style>
@keyframes run{
0%, 8%{ background-position: 0 0; }
9.2%, 17.2%{ background-position: -140px 0; }
18.4%, 26.4%{ background-position: -280px 0 ; }
27.6%, 35.6%{ background-position: -420px 0 ; }
36.8%, 44.8%{ background-position: -560px 0 ; }
46%, 54%{ background-position: -700px 0 ; }
55.2%, 63.2%{ background-position: -840px 0 ; }
64.4%, 72.4%{ background-position: -980px 0 ; }
73.6%, 81.6%{ background-position: -1120px 0 ; }
82.8%, 90.8%{ background-position: -1400px 0 ; }
92%, 100%{ background-position: -1540px 0 ; }
}
@-webkit-keyframes run{
0%, 8%{ background-position: 0 0; }
9.2%, 17.2%{ background-position: -140px 0; }
18.4%, 26.4%{ background-position: -280px 0 ; }
27.6%, 35.6%{ background-position: -420px 0 ; }
36.8%, 44.8%{ background-position: -560px 0 ; }
46%, 54%{ background-position: -700px 0 ; }
55.2%, 63.2%{ background-position: -840px 0 ; }
64.4%, 72.4%{ background-position: -980px 0 ; }
73.6%, 81.6%{ background-position: -1120px 0 ; }
82.8%, 90.8%{ background-position: -1400px 0 ; }
92%, 100%{ background-position: -1540px 0 ; }
}
p{
width:140px;
height:140px;
background: url(blog/754767/201606/754767-20160601000042992-1734972084.png) ;
animation:run 1s infinite;
-webkit-animation:run 1s infinite;
animation-fill-mode : backwards;
-webkit-animation-fill-mode : backwards;
}
</style>
</head>
<body>
<p></p>
</body>
</html>Copy after login
There is another implementation method, which is to use steps(), which is between frames Step animation, this is not written in w3c, first post a picture
As can be seen from the above picture:
steps(1,start): Animation 1 Jump to 100% from the beginning until the end of this frame (not the entire cycle)
steps(1,end): Maintain the 0% style until the end of this frame (not the entire cycle)
You can also Directly set animation-timing-function: step-start/step-end
The step-start effect is equivalent to steps(1,start), and the step-end effect is equivalent to steps(1,end)
Finally The effect, because the recording problem may be a bit laggy, interested students can directly copy the code and run it:
Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3逐帧动画</title>
<style>
@keyframes run{
0%{
background-position: 0 0;
}
8.333%{
background-position: -140px 0;
}
16.666%{
background-position: -280px 0 ;
}
25.0%{
background-position: -420px 0 ;
}
33.333%{
background-position: -560px 0 ;
}
41.666%{
background-position: -700px 0 ;
}
50.0%{
background-position: -840px 0 ;
}
58.333%{
background-position: -980px 0 ;
}
66.666%{
background-position: -1120px 0 ;
}
75.0%{
background-position: -1260px 0 ;
}
83.333%{
background-position: -1400px 0 ;
}
91.666%{
background-position: -1540px 0 ;
}
100%{
background-position: 0 0 ;
}
}
@-webkit-keyframes run{
0%{
background-position: 0 0;
}
8.333%{
background-position: -140px 0;
}
16.666%{
background-position: -280px 0 ;
}
25.0%{
background-position: -420px 0 ;
}
33.333%{
background-position: -560px 0 ;
}
41.666%{
background-position: -700px 0 ;
}
50.0%{
background-position: -840px 0 ;
}
58.333%{
background-position: -980px 0 ;
}
66.666%{
background-position: -1120px 0 ;
}
75.0%{
background-position: -1260px 0 ;
}
83.333%{
background-position: -1400px 0 ;
}
91.666%{
background-position: -1540px 0 ;
}
100%{
background-position: 0 0 ;
}
}
p{
width:140px;
height:140px;
background: url(754767/201606/754767-20160601000042992-1734972084.png) ;
animation:run 1s steps(1, start) infinite;
-webkit-animation:run 1s steps(1, start) infinite;
}
</style>
</head>
<body>
<p></p>
</body>Copy after login
The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.
The above is the detailed content of CSS3 animation implements frame-by-frame animation effect example introduction. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
