在学习JavaScript的一些总结和经验，供大家参考和学习，同时也欢迎大家参与讨论。

animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state ;

animation : 名称完成动画所用时间动画的速度曲线动画开始之前的延迟定义动画应该播放多少次是否应该轮流反向播放动画设置是否运行或暂停动画;

animation-name

animation-duration

animation-timing-function

下面表格这些属性的值，其实都是一个；而后面这个cubic-bezier(x1, y1, x2, y2)，是让我们自定义自己的立方贝塞尔曲线。

animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。

值	描述
linear	动画从开始到结束具有相同的速度。
ease	动画有一个缓慢的开始，然后快，结束慢。
ease-in	动画有一个缓慢的开始。
ease-out	动画结束缓慢。
ease-in-out	动画具有缓慢的开始和慢的结束。
step-start	阶跃函数，具体看下面外文第一篇
step-end	阶跃函数，具体看下面外文第一篇
cubic-bezier(n,n,n,n)	在立方贝塞尔函数中定义速度函数。可能的值是从0到1的数字值。

MDN：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-timing-function

https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function

外文：

https://tympanus.net/codrops/css_reference/timing-function_value/

https://www.the-art-of-web.com/css/timing-function/

模拟立方贝塞尔曲线的网站：

https://cubic-bezier.com

1576140443243

animation-delay

animation-iteration-count

设置动画重复次数，可以指定infinite无限次重复动画

animation-direction

animation-fill-mode

是否应该轮流反向播放动画

https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-fill-mode

https://www.cnblogs.com/lyzg/p/5738860.html

animation-play-state

w3cschool文档：https://www.w3cschool.cn/cssref/pr-animation.html

MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations

文章标题: 46.CSS3动画
文章作者: 王奕聪，QQ:1301842163
许可协议:
©署名-非商用-相同方式共享 4.0