animation属性 使用@keyfarmes属性开启动画步骤
结构体：@keyfarmes name{
from{ }
to{ }
}
@keyfarmes name{
0%{ }
50%{ }
100%{ }
}
animation-delay 延时属性以秒为单位；
animation-duration 执行时间 以秒为单位；
animation-name 动画名字
animation-timing-function属性 运动速度 ease 默认 linear 匀速 ease-in 加速 ease-in-out先加速再减速 ease-out 减速 cubic-bezier曲线
animation-iteraion-count 运动次数 可以写数字 也可以 写infinite 无限循环
animation-direction 是否来回反向循环运动
step-start：等同于 steps(1, start)
step-end：等同于 steps(1, end)
steps([, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
animation-play-state 检索或设置对象动画的状态
animation-play-state:running | paused;
running:运动
paused: 暂停
animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行
animation-fill-mode 检索或设置对象动画时间之外的状态
none:默认值，不设置对象动画之外的状态
forwards:设置对象状态为动画结束时的状态
backwards:设置对象状态为动画开始时的状态
both:设置对象状态为动画开始或结束时的状态
transform 属性 变形
transform属性有 有三个属性值 scale 缩放 skew 倾斜 translate平行移动 rotate旋转 单位是 像素或者是角度deg；
transform-origin 表示变形的起点位置 还有矩阵类型 matrix属性2d 3d属性。
当使用3d时 要开启3d模式 transform-style：preserve-3d；
perspective景深属性要写在它的父元素上面