我们在使用 transition实现动画的时候只能指定要改变的属性的开始值和结束值，然后在这两个值之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画效果

而animation通过定义多个关键帧( keyframes )以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述	`CSS`
`@keyframes`	定义动画。	3
`animation`	所有动画属性的简写属性，除了 `animation-play-state` 属性。	3
`animation-name`	规定 @keyframes 动画的名称。	3
`animation-duration`	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
`animation-timing-function`	规定动画的速度曲线。默认是 "ease"。	3
`animation-delay`	规定动画何时开始。默认是`0`。简写的时候，定义在`duration`的后面	3
`animation-iteration-count`	规定动画被播放的次数。默认是 1。	3
`animation-direction`	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
`animation-play-state`	规定动画是否正在运行或暂停。默认是 "running"。	3
`animation-fill-mode`	规定对象动画时间之外的状态。	3

div{
    width : 200px;
    height : 200px;
    margin: 200px auto;
    background-color : pink;
    animation-name: my_animation;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-direction: reverse;
    animation-delay:2s;
    animation-timing-function: linear;
    animation-fill-mode: both;
}
@keyframes my_animation {
    0%{
        width: 200px;
        height: 200px;
    }
    100%{
        width: 600px;
        height: 600px;
    }
}

@keyframes 动画名{

    //定义关键帧

}

关键帧定义时可以使用from、to、百分比
from表示0%、to表示100%
可以定义很多关键帧。20%、30%、...
百分比其实是指的时间的进度。(考虑以前学习过的归一化的时间)

相关属性详解

1. `animation-duration`

表示动画完成一个周期的时间。必须带单位。可以是s(秒)、ms(毫秒)。

默认值是0,表示没有任何动画效果。

2. `animation-timing-function`

其实就是我们以前学习的动画算子。

有一点需要注意：animation-timing-function是作用于两个关键帧之间，而不是整个动画周期

可以是下面的值：

keyword value

animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

function value

贝塞尔曲线函数：

cubic-bezier(x0, y0, x1, y1)。生成贝塞尔函数参考下面的网站：

http://cubic-bezier.com/

阶跃函数：

steps(number, start/end) 极少使用，了解即可。

参数1：一个正整数，表示把两个关键帧之间分成几个阶段。0和负值无效

参数2：阶跃点。可以是 start 或 end 这两个值中的一个。

start从阶段的开始处的跳跃，end阶段的结束处跳跃

3. `animation-delay`

动画延迟一段时间后再执行。单位是 s 或 ms。

注意：在简写的时候，必须在animation-duration后面定义。

4. `animation-iteration-count`

表示动画停止前执行的周期的个数。 1表示执行一次。也可以是浮点数，比如0.5执行半个周期。

如果需要一直执行下去，使用 infinite

5. `animation-direction`

表示动画执行方向。

有四个值：

normal

默认值，每个周期执行都是从前向后执行。
reverse

每个动画周期都是从后向前执行。
alternate

第1个周期从前向后，第2个周期从后向前......
alternate-reverse

第1个周期从后向前，第2个周期从前向后......

6. `animation-fill-mode`

表示动画执行前或执行后元素的状态。

有4个值：

none(默认值)

不添加任何与动画相关的样式在元素上。
forwards

动画执行完成后，最后一帧的属性一直保持在元素上
backwards

在 duration-delay期间显示第1帧。(经测试：chrome浏览器无效)
all

同时使用 forwards 和 backwards

7. `animation-play-state`

决定动画是暂停还是执行。

2个值：

running

动画正则执行
paused

动画正在暂停

可以在JavaScript中，通过这个属性来暂停或继续执行动画。

注意：running 会让动画从暂停的地方执行，而不是从第一帧开始执行。

属性简写

/* @keyframes duration | timing-function | delay | 
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;

动画事件

我们也可以在Javascript代码中监听动画相关的一些事件。

var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false); //监听动画事件：动画开始
e.addEventListener("animationend", listener, false);  //动画结束
e.addEventListener("animationiteration", listener, false); //动画切换周期

e.className = "slidein"; //添加类之后启动动画

`animate.css`

animate.css是一个有趣，酷炫的，跨浏览器的动画库，你可以将它用于你的项目中。不管是主页，滑动切换，又或者是其它方面，你都可以通过它来制作出惊人的效果。

使用步骤

下载animate.css

推荐浏览器直接下载

animate.css

在 html 页面中引入

<link rel="stylesheet" href="animate.min.css">

给元素添加相应的class

给你需要动画的元素添加class animater。如果需要无限循环动画执行，添加class infinite
```
<div class="animated infinite"></div>
```
添加下面的class,来完得到你想要的动画效果
- bounce
- flash
- pulse
- rubberBand
- shake
- headShake
- swing
- tada
- wobble
- jello
- bounceIn
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
- bounceOut
- bounceOutDown
- bounceOutLeft
- bounceOutRight
- bounceOutUp
- fadeIn
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- fadeOut
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
- flipInX
- flipInY
- flipOutX
- flipOutY
- lightSpeedIn
- lightSpeedOut
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
- hinge
- jackInTheBox
- rollIn
- rollOut
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- zoomOut
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
```
<div class="animated infinite bounce"></div>
```

如果默认的参数不满足需求也可以自己添加相应的参数

#yourElement {
  animation-duration: 3s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

也可以使用代码动态的添加class

结合jquery动态的添加class，完成动画功能。

第 6 章动画

相关属性详解

1. `animation-duration`

2. `animation-timing-function`

贝塞尔曲线函数：

阶跃函数：

3. `animation-delay`

4. `animation-iteration-count`

5. `animation-direction`

6. `animation-fill-mode`

7. `animation-play-state`

属性简写

动画事件

`animate.css`

使用步骤

也可以使用代码动态的添加class

results matching ""

No results matching ""

相关属性详解

1. animation-duration

2. animation-timing-function

贝塞尔曲线函数：

阶跃函数：

3. animation-delay

4. animation-iteration-count

5. animation-direction

6. animation-fill-mode

7. animation-play-state

属性简写

动画事件

animate.css

使用步骤

也可以使用代码动态的添加class

results matching ""

No results matching ""

1. `animation-duration`

2. `animation-timing-function`

3. `animation-delay`

4. `animation-iteration-count`

5. `animation-direction`

6. `animation-fill-mode`

7. `animation-play-state`

`animate.css`