<meta charset="utf-8">
<article class="_2rhmJa">
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); 旋转
</article>
0人点赞
作者：晴空0_0
链接：//www.greatytc.com/p/95dc19444ef8
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
