@keyframe 名称{
0%{}
50%{}
100%{}
}
一、空间的位移
transform:translate3d (x, y, z )
单独设置x,y,z轴(px为单位)translate后面跟的x,y,z为大写
X轴:
translateX(x px)
Y轴:
translateY(y px)
Z轴:
translateZ(z px)
注:z轴需要配合透视法肉眼才能看到效果。
二、透视法
给父级加个perspective
取值:(建议)800~1200px
三、空间旋转
transform:rotate(值为角度 单位为deg)
- 各轴用法与位移一致
四、立体呈现
给父元素加tracsform-style:preserve-3d
可以让子元素处于真正的3d空间
五、动画
使用animation添加动画效果
1.动画于过度的区别
(1).过度只能实现两个状态间的变化。
(2).动画可以实现多个状态间的变化。
动画的本质士快速切换大量图片时,人脑中形成具有连续性的画面。
构成动画的最小单元为:帧。
2.动画的两种写法。
方法一:实现两种变化
@keyframe 名称{
from{}
to{}
}
from写开始状态,to写结束变化
方法二:实现多种变化
@keyframe 名称{
0%{}
50%{}
100%{}
}
百分比表示每个阶段的状态
3.animation的用法与值
- 谁要动画给谁加animation
- animation取值不分先后顺序 (但是animation有两个值必须加:动画名称和动画时长)
- 如果出现两个时间值,第一个表示动画时长,第二个表示延迟时间。
取值:
(1)、动画名称animation-name
@keyframe中取得名称
(2)、动画时长animation-duration
数字+s(s为单位)
(3)、速度曲线animation-timing-function
匀速动画:linear
逐帧动画:steps() 括号中写数字,表示分几部分
(4)、延迟时间animation-delay
数字+s (s表示单位)
(5)、重复次数animation-iteration-count
- 直接写个数字
例:3 (表示重复播放三次)
- infinite (这个代表无限循环)
(6)、动画方向animation-direction
alternate(这个表示反向运动)
(7)、执行完毕时状态animation-fill-mode
初始状态:backwards(此为默认值)
最终状态:forwards
(8)、动画的暂停animation-play-state
值:pused为暂停,一般配合hover使用