[TOC]
## 1、transition和animation的区别
```
transition是过渡，animation是动画。transition只能从一种状态过渡到另外一种状态，animation可以定制复杂动画，可以定义动画的区间等。
transition必须通过一些行为才能触发（js或者伪类来触发），animation的话直接就可以触发。
```
## 2.transfrom
```
旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix
```
## 3.transfrom 改变中心点
```
transform-origin: 10px 10px
```
## 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%;
}
}
