一、变换(二)
1.scale缩放
transform:scale(要缩放的倍数)|scaleX(要缩放的倍数)|scaleY(要缩放的倍数)
2.skew扭曲
transform:skew(度数)|skewX(度数)|skewY(度数)
3.改变基准点:transform-origin:x轴方向或角度Y轴方向或角度
二、过度
1.transition-property:none|属性|all
2.transform-duration:过渡执行的时间,必须加单位ms|s
3.transform-timing-function:过渡速度
ease:默认 逐渐变慢
linear:匀速
ease-in:加速
ease-out:减速
ease-in-out:先加速后减速
cubic-bezier:特定曲线
4.transform-delay:过渡延迟时间 必须加单位ms|s
综合起来写:
transition:过渡的属性 过渡执行的时间 过渡速度 过渡延迟时间
三、动画animation
1.animation-name:动画的名字
2.animation-duration:动画执行时间
3.animation-timing-function:动画执行速度(同transition的过渡速度)
如果是一个几种状态的背景图时,应该写为steps(有几种状态就写几)
4.animation-delay:动画延迟时间
5.animation-count:动画执行次数
finite有限次 用数值来标书
infinite:无限次
6.animation-direction:动画执行方向
normol默认 从开始至结束
alternate来回运动 从开始至结束
reverse反向 从结束至开始
alternate-reverse从结束到开始来回动
7.animation-fill-mode:动画填充模式
none:不改变默认行为
both:向前和向后模式都被应用
forwards:向前(动画在结束位置上停)
backwords:停在初始位置上
综合起来写:
animation:动画的名字 动画的执行时间 动画执行速度 动画延迟时间 动画执行次数动画执行方向
关键帧:
定义关键帧
1.只有两个状态时
@keyframes动画名称{
from{}
to{}
}
2.有多个状态时
@keyframes动画名称{
0%{}
...
100%{}
}
8.animation-play-state:播放状态
running:默认 播放
paused:暂停
�/[WzQ��c��