入门css3动画

入门css3动画

为了让页面体验更为流畅，我们在更多的时候都会采用一些动画给页面流程增加一些耦合性

css3动画分为两类

1. 过渡动画transition(从一个状态变为另一个状态)

eg:一个div宽高都为100px，鼠标移上后变为宽高各300px
```
div {
    width: 100px;
    height: 100px;
}
div:hover {
    width: 300px;
    height: 300px;
}
```
这时候我们就可以用到过渡动画
```
div {
    width: 100px;
    height: 100px;
    transition: width 3s, height 3s;
}
```

2. 关键帧动画keyframes(一个动画定义多个关键帧，实现更为复杂的动画)

定义一个关键帧动画

// 关键帧的书写很灵活，一行可以写多个关键帧
@keyframes 动画名 {
    0% {...}
    ...
    /** 时间点 元素状态 **/
    ...
    100% {...}
}

将关键帧动画绑到元素上，需要使用animation属性