# 動畫
[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>
```
