CSS动画
1.定义动画:使用@keyframes 定义动画,关键帧可以使用关键字from~to,也可以使用0%~100%
2.配置动画:
animation-name 动画的名字
@keyframes定义的动画的名字
animation-duration 动画持续的时间
单位 s、ms 默认为零秒
animation-iteration-count 动画迭代次数
<number>、infinite(无限循环)
animation-delay 动画延迟执行时间
单位 s、ms 默认为零秒
animation-derection
normal (默认)正常播放
reverse 播放帧的顺序反转,播放的起点为帧的结束
atemate 播放帧的顺序交替反转,即第一次播放从帧的开始播放到帧的结束,第二次播放就从帧的结束播放到帧的开始
alternate-reverse 与alternate类似,不过第一次播放时候需要反转
animation-fill-mode 填充模式
none 不改变默认行为,默认值
forwards 在动画结束后,目标将保留在执行期间所遇到的最后一个关键帧所设置的计算值
backwards 在延迟时间内,目标将保留在执行期间所遇到的第一个关键帧所设置的计算值。
both 向前和向后填充模式都被应用
animation-timing-function 动画的速度曲线
ease 默认值,先快后慢
linear 线性增长,匀速
ease-in 先慢后快
ease-out 先快后慢
ease-in-out 先慢后快再慢
CSS过渡:transition
div {
transition: <property> <duration> <timing-function> <delay>;
}
transition-property 过渡属性
transition-duration 持续时间
transition- timing-function 时间速度曲线
transition-delay 过渡延迟
background border Box-shadow flex margin padding
color font text opacity visibility z-index
width height max-height Max-width Min-height Min-width
left right top bottom outline
过渡和动画的区别:
1.过渡需要触发
2.不是所有属性都能过渡
CSS变形:transform
rotate 旋转
rotateX (angle)
绕X轴旋转,例如单杠运动 30deg
rotateY ( angle )
绕Y轴旋转,例如钢管舞运动
rotateZ ( angle )
绕Z轴旋转,例如旋转盘。
rotate ( angle )
与rotateZ()一致。
skew 倾斜
skew(x,y)
skewX(deg)
skewY(deg)
scale 缩放
scale(x,y)
scale(deg)
scale(deg)
第三动画库安装
1.安装:先把源码下载到本地
2.使用语法
<div class='animate_animated 动画类名'>hello</div>