CSS 动画 @keyframes 规则 animation属性 CSS中可以进行动画的属性

animation: 动画名称 时长； 
@keyframes 动画名 {
	0% {},
	100% {}
}

@keyframes 应以一段动画，可在不同百分比时间处设置关键帧(此时的样式值)
from 和 to 分别等价于 0% 和 100%

animation-timing-function

ease(舒缓 默认 整体上还是先快后慢) ease-in(缓入)
ease-out(缓出)
ease-in-out cubic-bezier(n,n,n,n)(贝塞尔曲线)
steps(number_of_steps, direction)（阶梯函数-类似gif表情包式的跳变）

animation-fill-mode

在动画执行之前和之后 样式规则
none 会保持原来的样式
forwards 保留由执行期间遇到的最后一个关键帧的样式
backwards 在动画延时开始时，应用第一个关键帧的样式
both 遵循forwards和backwards

animation-delay

延时播放动画
s 或是 ms

animation-iteration-count

规定动画播放次数
数字 或是 infinite（无限）

animation-direction

normal 正常播放
reverse 反向播放
alternate 先正向播放，每次播完后调转方向
alternate-reverse 先反向播放，每次播完后调转方向

animation–play-state

默认running
可用于暂停动画 object.style.animationPlayState="paused"

CSS中可以进行动画的属性

background
margin、padding、border
width、height
max-width、min-width
max-height、min-height
left、right、top、bottom
z-index
outline
flex、order
box-shadow
filter 滤镜
clip
vertical-align
visibility
opacity
文本相关：
color
columns(column-count、column-width)、column-gap、column-rule
font
letter-spacing 字符间距
line-height
text-decoration-color 文本修饰颜色
text-indent 文本缩进
text-shadow
word-spacing 单词间距

3D：
perspective、perspective-origin 透视
transform、transform-origin 转换