CSS animation动画
CSS animation动画
参考网站：
https://www.w3school.com.cn/
https://v3.cn.vuejs.org/
你要做什么？
改变HTML中的DOM元素的属性。产生一个过渡的连续过程。
animation配置项
| 值 | 描述 |
|---|---|
| animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
例：
animation: name duration timing-function delay iteration-count direction;
当然也可以单独设置每一项的属性。
很多属性可以用JS设置，通常就是属性的短横线-，换成驼峰命名法
例：
object.style.animationDelay="2s"
animation-name
animation-name 属性为 @keyframes 动画规定名称。
animation-duration
animation-duration属性定义动画完成一个周期所需要的时间，以秒或毫秒计。
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
animation-timing-function
animation-timing-function 规定动画的速度曲线。
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
| 值 | 描述 | 测试 |
|---|---|---|
| linear | 动画从头到尾的速度是相同的。 | 测试 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 | 测试 |
| ease-in | 动画以低速开始。 | 测试 |
| ease-out | 动画以低速结束。 | 测试 |
| ease-in-out | 动画以低速开始和结束。 | 测试 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
其中最强大的是cubic-bezier，也就是俗称的贝塞尔曲线函数。测试
animation-delay
animation-delay 属性定义动画何时开始。
可以是负数，这是就是提前开始动画。也就是减去动画时长。
animation-iteration-count
animation-iteration-count 属性定义动画的播放次数
一般输入数字就好了，如果要无限循环，设成"infinite"
animation-direction
animation-direction 属性定义是否应该轮流反向播放动画。
normal，默认，正常播放动画。
alternate，反向播放。
animation-fill-mode
动画结束后，最后应该保留的样式，默认是还原成之前的样式。
- none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
- forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
- backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
- both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。
animation-play-state
动画暂停和开始，配置项paused和running
@keyframes
定义了一套规则，从老的样式变到新的样式。
这里name需要配合另一个@keyframes
<style type="text/css">
.myclass{
animation: clip01 0.5s;
}
@keyframes clip01 {
from { background: red; }
to{background: yellow;}
}
</style>
这里我用类选择器myclass 里设置了animation-name和animation-duration。对应到clip01。
在0.5秒内背景颜色从红色变到黄色
开始效果：
结尾效果：
停止效果：
当然最后动画结束又变成白色的了。
可以按from to这种方式，也可单独设置百分比
例:
@keyframes mymove { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} }
不同浏览器
animation或keyframes属性前面带上前缀，安排不同浏览器内核的效果
-webkit-、-moz- 或 -o-
例：
-webkit-animation: clip01 0.5s;
最低支持的内核版本号。
