变化、过渡、动画

一、变换（二）

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��