CSS3动画

变换transform

transform: rotate旋转 | scale放大/缩小 | skew扭曲 | translate移动;
属性之间用空格隔开 注意：不是逗号“，”

1.translate

translate([,

图片19.png

translateX()

图片20.png

translateY()

图片21.png

2.旋转rotate

rotate()

图片22.png

Transform:rotate(45deg);
Transform:rotateX(45deg);
Transform:rotateY(45deg);
Transform:rotateZ(45deg);

3.缩放scale

scale([, ])

图片23.png

scaleX()

图片24.png

scaleY()

图片25.png

4.扭曲skew

skew( [, ])

图片26.png

skewX()

图片27.png

skewY()

图片28.png

改变元素基点transform-origin
transform-origin:X,Y
(1) transform-origin:left top:
(2) transform-origin:right
(3) transform-origin:25% 75%;

过渡transition

Transition: all 5s ease 0;
一、transition-property:
transition-property ： none | all | [ ]
二、transition-duration:
transition-duration ： [, ]
为数值，单位为s（秒）或者ms(毫秒),
三、transition-timing-function:
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2) 四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

图片29.png

四、transition-delay:
transition-delay ： [, ]

animation

图片30.png

animation-name: 动画名称
animation-name: none | IDENT
IDENT是由Keyframes创建的动画名，可以同时附几个animation给一个元素，我们只需要用逗号“，”隔开

animation-duration 动画持续时间
取值:为数值，单位为s （秒.）其默认值为“0”
animation-timing-function: 动画速度
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )
animation-delay: 动画延迟时间
取值为为数值，单位为s(秒)，其默认值也是0。
animation-iteration-count 动画次数
animation-iteration-count:infinite无限次播放 |
animation-direction 动画运动方向
animation-direction: normal | alternate(来回) | reverse(反向) | alternate-reverse(反向来回)
animation-fill-mode 动画填充模式
规定动画在播放之前或之后，其动画效果是否可见。
animation-fill-mode : none | forwards | backwards | both;
none 不改变默认行为。
both 向前和向后填充模式都被应用，兼具forwards和backwards。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义），效果留在结束位置上。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义），效果留在刚刚那个位置。

animation-play-state: running/paused 动画的播放状态

Keyframes “关键帧”

@keyframes  动画的名称{ 
 from{}
to{}
}

@keyframes IDENT {
      0% {
         Properties:Properties value;
      }
      Percentage {
         Properties:Properties value;
      }
      100% {
         Properties:Properties value;
      }
    }

图片32.png

![](img/1.jpg)

![](img/2.jpg)

![](img/3.jpg)

![](img/4.jpg)

![](img/5.jpg)

![](img/6.jpg)

![](img/7.jpg)

![](img/8.jpg)

阶跃函数

step(n,start/end)
from 开始状态 to 结束状态
将animation-timing-function改为steps

图片31.png