Immediately in 2020, not knowing little friends learned this year css3 animation yet?
Speaking css animation is a very embarrassed to do, partly because the company with less css animation, on the other hand most of the developers are accustomed to using JavaScript animation to do so has led many programmers to learn more exclusive css animation ( at least I was), but a front-end engineers do not understand css animation can not be called master css3, in fact, when you really learn css animation, you will be attracted by its charm, which can reduce the amount of code and improve performance.
Previous article we have learned together transition use, do not know if students can see my previous article.
He did not talk much, and I immediately went to learn today's leading animation of it!
animation grammar
| value | description |
|---|---|
| @keyframes | Define an animation, @ keyframes defined name of the animation is used to animation-name |
| animation-name | Retrieve or set the application object animation name must be used in conjunction with the rules @keyframes, because the animation is defined by the name @keyframes |
| animation-duration | Duration of animated objects retrieved or set |
| animation-timing-function | Transition type retrieved or set of object animation |
| animation-delay | Retrieve or set the delay time animated objects |
| animation-iteration-count | The number of cycles to retrieve or set the object animation |
| animation-direction | Animating Objects retrieved or whether the reverse movement in the loop |
| animation-play-state | Retrieve or set object animation state |
animation translated into Chinese is the meaning of the animation, then you can skillfully use it for a wide variety of cool animations.
@keyframes: definition of an animation, the animation defined name to be used for animation-name.
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation:mymove 2s;
}
@keyframes mymove{
0% {width:50px;height:50px;}
50% {width:100px;height:100px;}
100% {width:50px;height:50px;}
}
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）@keyframes mainly to do keyframe animation, each with a name behind @keyframes should, in case the use of the mymovename as a frame of the animation, then you can add style to a keyframe in the style, and then based on key frames @keyframescan automatically form smooth animation.
animation-name: application to retrieve or set the animation object name, the rule must be used with @keyframes, as defined by the name of the animation @keyframes
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation-name:mymove;
animation-duration:2s;
}
@keyframes mymove{
0% {width:50px;height:50px;}
50% {width:100px;height:100px;}
100% {width:50px;height:50px;}
}
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）In animation-namePrior to use, we've defined a named mymoveframe animation, where the frame of the movie name as the value of the animation-name, the implication is that the current frame of the animation element will execute the set.
Duration retrieve or set the object animation: animation-duration
Continuing with the previous case, there is only a frame animation and animation names need to do is not enough to form the animation, we also need to set the time required for execution of an animation, here used the animation-durationproperty, so the time a case is shown two seconds once.
Transition type retrieved or set to animate: animation-timing-function
div{
width:100px;
height:50px;
background:#f40;
position:relative;
animation-name:mymove;
animation-duration:3s;
animation-timing-function:ease-in-out;
}
@keyframes mymove{
0% {left:0px;}
100% {left:300px;}
}animation-timing-functionThe effect is to change the animation speed in each frame. Here transition-timing-functiononly shows the value of ease-in-outanimation effects can be understood as 慢-快-慢. Other not to, you can refer to the following table to understand.
| value | description |
|---|---|
| linear | Animation speed from beginning to end is the same. |
| ease | default. Animation start at low speed, then speed up, slow down before the end. |
| ease-in | Animation starts at low speed. |
| ease-out | Low-end animation. |
| ease-in-out | Animation start and end at a low speed. |
| cubic-bezier(n,n,n,n) | Their value in cubic-bezier function. Possible values are a value of from 0 to 1. |
Retrieved or set a delay time to animate: animation-delay
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation-name:mymove;
animation-duration:2s;
animation-delay:2s;
}
@keyframes mymove{
0% {width:50px;height:50px;}
50% {width:100px;height:100px;}
100% {width:50px;height:50px;}
}
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）Here animation-delayis the 2smeans to delay the execution of the animation after a delay of two seconds seconds.
animation-iteration-count：检索或设置对象动画的循环次数
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation-name:mymove;
animation-duration:2s;
animation-iteration-count:infinite;
}
@keyframes mymove{
0% {width:50px;height:50px;}
50% {width:100px;height:100px;}
100% {width:50px;height:50px;}
}这里animation-iteration-count的值为infinite，意思是动画将会无限次的执行，这也就达到了循环的效果，当然你还可以给它具体的数值，当执行你设置的次数后它会自动停止。
animation-direction：检索或设置对象动画在循环中是否反向运动
div{
width:100px;
height:50px;
background:#f40;
position:relative;
animation-name:mymove;
animation-duration:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
}
@keyframes mymove{
0% {left:0px;}
100% {left:300px;}
}
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）这里animation-direction的值为alternate，代表动画将会来回的反复执行，他还有其它属性，在下表给出供小伙伴们自己尝试。
| 值 | 描述 |
|---|---|
| normal | 默认值。动画按正常播放。 |
| reverse | 动画反向播放。 |
| alternate | 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 |
| alternate-reverse | 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性。 |
animation-play-state：检索或设置对象动画的状态
<style>
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation-name:mymove;
animation-duration:2s;
animation-iteration-count:infinite;
}
@keyframes mymove{
0% {width:50px;height:50px;}
50% {width:100px;height:100px;}
100% {width:50px;height:50px;}
}
</style>
<body>
<button onclick="pause()">暂停</button>
<button onclick="run()">恢复</button>
<div></div>
</body>function pause(){
document.querySelector('div').style.animationPlayState="paused"
}
function run(){
document.querySelector('div').style.animationPlayState="running"
}animation-play-state的默认值为running，就是动画执行的意思，在实际应用中我们经常使用js来操作这个属性，从而控制动画的播放和暂停。
今天我们一共学习了八个属性值，他们都是属于animation属性的，这里给出属性值在animation中的简写方式。
animation: name duration timing-function delay iteration-count direction play-state;
div{
animation:mymove 2s ease-in-out 3s infinite alternate running;
}
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）那么这里的意思就是mymove动画将在三秒钟后开始，以两秒一个循环慢-快-慢方式，进行动画的展示，并且每次动画过后都会向相反方向执行动画。
结论
After the above study, I believe you have a preliminary understanding of animationthe usage, along with you animationin-depth understanding, can do some creative animation, you can look at a variety of animated js before they used to write, try to use our two content articles have learned to be modified, I believe you have these two properties have a better understanding.