入門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屬性