[TOC]
## 1、transition和animation的區別
```
transition是過渡，animation是動畫。transition只能從一種狀態過渡到另外一種狀態，animation可以定制復雜動畫，可以定義動畫的區間等。
transition必須通過一些行為才能觸發（js或者偽類來觸發），animation的話直接就可以觸發。
```
## animation
> 需要規定動畫名稱，動畫時長
參數 animation（name，花費的時間，速度曲線，延遲，次數，反向播放）
- 做一個進度條
```
規定動畫時長，規定動畫名稱
div{
border: 1px solid #999;
width:500px;
}
div>div{
width: 50%
background: #FFBAC3;
animation:name 4s ;
}
@keyframes name {
0% {
width: 0;
background: #FFBAC3;
}
100% {
width: 50%;
}
}
```
