# 动画
[TOC]
## 渐变动画
`transition`动画可以控制HTML组件的某个属性发生改变时经历的时间，使其以平滑渐变的方式发生改变，产生动画效果。有4个参数。
* 第一个参数：指定对哪个HTML元素进行处理。
* 第二个参数：定义持续时间。
* 第三个参数：指定渐变的速度。（有多个可用的属性值，请完成自学）
* 第四个参数：指定延迟时间。
```html
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
}
div:hover
{
width:300px;
}
</style>
<body>
<div></div>
</body>
```
## Animation动画
`annimation`动画提供了更灵活的制作动画的方法。`animation`是一个符合属性，有5个参数：
* 第一个参数：指定动画的名称。
* 第二个参数：指定动画的持续时间。
* 第三个参数：指定动画的变化速度。
* 第四个参数：指定动画延迟多久开始执行。
* 第五个参数：指定动画循环执行的次数。
```html
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
</style>
<body>
<div></div>
</body>
```
