共计 1079 个字符,预计需要花费 3 分钟才能阅读完成。
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 缩放值)
正文完