「CSS3 」动画详解_html/css_WEB-ITnose

css3 提供给了我们非常多的转换函数：

• 2D: translate, rotate, scale, skew.

• 3D: translate3d, rotate3d, scale3d, skew3d.

只需要将这些函数作为transform属性的值，就可以设置相应的效果。

CSS3 动画则是将这些效果以及其他CSS属性按照你设定的方式来进行互相转变。

立即学习“前端免费学习笔记（深入）”；

1. 动画相关属性

@keyframes

定义动画各个阶段的状态的代码段。比如开始态，结束态，中间态（使用百分比表示）。

@keyframes exampleName {    from {        transform: rotateY(0deg);        background: #000000;    }    50% {        transform: rotateY(180deg);        background: #00fa7e;    }    to {        transform: rotateY(0deg);        background: #008dff;    }}

animation-name

使用 @keyframes 定义的状态集合名称，如上面的 exampleName。

animation-duration

动画的周期时间。单位可以是秒(s)，也可以是毫秒(ms)。

animation-timing-function

动画变化速度函数，有如下几种选项：

• linear: 速度不变。

• ease-in: 低速开始 ~ 正常速度。

• ease-out: 正常速度 ~ 低速结束。

• ease-in-out: 低速开始 ~ 正常速度 ~ 低速结束。

• ease: 与 ease-in-out 基本相同，但是开始稍微比结束快一点儿。

• cubic-bezier(x1, y1, x2, y2): 使用三次贝塞尔函数作为速度函数。

animation-delay

动画开始之前等待的时间。单位可以是秒(s)，也可以是毫秒(ms)。

animation-iteration-count

动画的循环次数。可以是具体的次数，也可以是 infinite，表示无限循环播放。

animation-direction

动画循环的方向：

• normal: 正向播放。

• reverse: 反向播放。

• alternate: 正向播放与反向播放交替进行。

animation

以上6个属性可以使用这一个属性来表示，格式为：

animate: name duration timing-function delay iteration-count direction;

animation-play-state

控制动画的状态，有播放(running)和暂停(paused)两种状态。

animation-fill-mode

规定元素在动画开始前和完成后的状态。

• none: 元素在动画前后的状态和动画没有联系。

• forwards: 动画完成后，元素保持动画最后的状态。

• backwards: 动画开始前，元素保持动画开始的状态。

• both: forwards 和 backwards 的结合。

2. transition

CSS3 除了 animation 相关的属性以外，还提供给我们一个 transition 属性，格式为：

transition: propertyName duration [timing-function] [delay], ...;

大家可能已经也看出来了，其实 transition 就是 @keyframes 只有 from 和 to 两个状态，并且播放次数为1，且不能暂停的 animation。

3. Demo

https://github.com/JasonKid/fezone/tree/master/CSS3/%E5%8A%A8%E7%94%BB%E8%AF%A6%E8%A7%A3