## CSS3动画
### transition 过渡动画
- 设置过渡动画效果的CSS属性名称
- all 全部
- left
- width
- height
- bottom
- ...
- 完成过渡动画效果所需要的时间
- 1s(以秒为单位)
- 动画的运动曲线
- ease 平滑过渡(慢->快->慢) 默认值
- linear 线性过渡(以相同的速度开始和结束)
- 延迟过渡动画效果的开始时间
- 1s(以秒为单位)
### transform 向元素应用2D或3D转换
#### translate 移动位置
- translate(x,y) 定义x,y轴的位置
- translate(x) 定义x轴的位置，y轴默认为0
- tanslateX(x)
- tanslateY(y)
```
.box:hover{
-webkit-transform:translateY(-100px);
transform:translateY(-100px);
}
```
### scale 缩放
> 单位:n(倍数)
- transform: scale(x,y); 定义x/y的值
- transform: scale(n);
> 当scale的值 大于1是放大，小于1是缩放，等于1默认值
```
.box:hover{
-webkit-transform: scale(.5);
transform: scale(.5);
}
```
### rotate 旋转
> 单位：deg(角度)
- transform: rotate(n); 值为正数，顺时针方向
- transform: rotate(-n);值为负数，逆时针方向
```
.box:hover{
-webkit-transform: rotate(-3600deg);
transform: rotate(-3600deg);
}
```
### skew倾斜
> 单位：deg(角度)
- transform: skew(-90deg); 负数时，顺时针
- transform: skew(90deg); 正数时，逆时针
```
.box:hover{
-webkit-transform: skew(-90deg);
transform: skew(-90deg);
}
```
### animation 帧动画
#### 规定好动画的效果
- 指定关键帧动画 @keyframes
- 给动画起一个名称
- 大括号{}
- 0%{} 动画开始的位置 100%{} 动画结束的位置
- from{} 动画开始的位置 to{} 动画结束的位置
- **from to 和 0% 100% 的区别？**
- 0%{} 50%{} 100%{} 动画效果可以分段，而form to不可以
> transform 转换：translate 移动位置、scale缩放、rotate 旋转、skew 倾斜..
#### 给指定的元素添加动画效果
- 动画的名称
- 动画效果所完成的时间
- 以秒为单位 s
- 动画运动曲线
- ease
- linear
- 延迟动画开始的时间
- 动画效果运行的次数
- 具体的次数 n, 默认值为1
- infinite 无限次
- 动画结束后的状态
- **both**
- backwards
- forwards
### steps
> 是一个定时功能，允许我们将动画分割成段，而不是从一种状态持续到另一种状态的过渡
> 参数是一个正值，指定我们希望动画分割的段数。
> steps 一般用在雪碧图的动画效果上