一、变换（二）
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��
网友评论