1. 动画属性
(1) 定义动画
- @keyframes 动画名{
关键帧
from{}
to{}
}
- @keyframes 动画名{
关键帧划分的是工夫，个别百分比增量要雷同 0%-100%
比方实现整个动画须要5s
0%{} 0s
10%{} 0.5s
20%{} 1s
50%{} 2.5s
100%{} 5s
}
(2) 应用动画
- animation-name: 动画名
- animation-duration: 动画执行的工夫 s/ms
- animation-delay: 动画延迟时间 s/ms
- animation-timing-function: linear(匀速)/ease-in(减速)/ease-out(加速)/ease-in-out(慢-快-慢)
- animation-iteration-count: 数字/infinite(有限次)
- animation-direction: reverse(关键帧反向播放)/alternate(关键帧交替播放 0%-100%-0%)
- animation-fill-mode:动画进行的关键帧，应用该属性的话，不能够设置有限循环，不然停不下来。forwards(最初一个关键帧)/backwards(第一个关键帧)
- animation-play-state: running(运行)/paused(进行)
复合写法：
- animation: 动画名 动画执行的工夫 动画延迟时间 动画成果 执行次数
2. 3d位移
- z轴位移 transform：translateZ(数值+px) 不要应用百分比
- xyz位移 transform: translate3d(x轴位移,y轴的位移,z轴的位移)
3. 3d旋转
- x轴旋转 transform:rotateX(数值+deg)
- y轴旋转 transform:rotateY(数值+deg)
xyz都旋转 transform:rotate3d(a,b,c,d)
- a b c的取值为0或者1。0代表不旋转，1代表旋转。
- d是旋转度数
- 也能够应用tranform: rotateX() rotateY() rotateZ();
造成3d舞台：在父元素身上增加，看到成果之后， 须要加个旋转（旋转x,y,因为有些成果在初始的立体看不到）
- transform-style:flat(立体)/ preserve-3d(空间)
- 背部暗藏： 设置了通明后，然而不想看到前面的内容，给该元素 backface-visibility: hidden;
- perspective: 数值+px； 值越小越近， 看到的越大
4. 3d缩放
- z轴transform:sacleZ()
- xyz缩放 transform:scale3d(x缩放值,y缩放值,z缩放值)