animation，transform属性

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景深属性要写在它的父元素上面