1. 动画名

animation-name:active;

2. 完成动画所需时间

animation-duration:10s;

3. 动画速度

animation-timing-function:ease-in;低速开始
animation-timing-function:ease-out;低速结束
animation-timing-function:ease-in-out;低速开始和结束
animation-timing-function:linear;匀速

4. 动画开始时间

animation-delay:1s;

5. 播放次数(n/infinite)

animation-iteration-count:infinite;无限次

6. 播放方向

animation-direction:nomal;正常
animation-direction:reverse;反向
animation-direction:alternate;奇数次正向
animation-direction:alternate-reverse;奇数次反向
animation-direction:inherit;继承

7. 动画停留位置

animation-fill-mode:none;默认值
animation-fill-mode:forwards;结束位置
animation-fill-mode:backwards;开始位置

8. 复合写法

animation:active 5s ease-in 2 2s normal forwards;
动画名 完成时间 速度 播放次数 延迟时间 播放方向 停留位置

9. 2D

1）transition:0.7s; 过渡属性
2）transform:translate(20px,30px); 平移
3）transform:scale(0.5,0.5); 缩放
4）transform:skew(100deg,20deg); 倾斜
5）transform:rotate(70deg); 旋转
6）transform-origin:center; 基准点设置

10. 3D

1）transform-style:preserve-3d; 环境准备
2）transform:translate3d(10px,10px,20px); 平移
3）transform:scale3d(0.5,1,0.5); 缩放
4）transform:scaleZ(0.5); 缩放
5）transform:rotate(1,1,1,20deg); 前三个值取值为-1、0、1，第四个值为角度
6）transform:rotateZ(30deg); 旋转