animation 動畫 · PHP/Python/前端/Linux 等等學習筆記

[TOC] ## animation 語法 ``` div:hover { animation: 1s rainbow; } @keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } } ``` 格式 ``` 縮寫 div:hover { animation: 1s 1s rainbow linear 3 forwards normal; } 詳細 div:hover { animation-name: rainbow; animation-duration: 1s; animation-timing-function: linear; animation-delay: 1s; animation-fill-mode:forwards; animation-direction: normal; animation-iteration-count: 3; } ``` ### 屬性 | 屬性 | 描述 | CSS | | --- | --- | --- | | [@keyframes](https://www.runoob.com/cssref/css3-pr-animation-keyframes.html "CSS3 @keyframes 規則") | 規定動畫。 | 3 | | [animation](https://www.runoob.com/cssref/css3-pr-animation.html "CSS3 animation 屬性") | 所有動畫屬性的簡寫屬性。 | 3 | | [animation-name](https://www.runoob.com/cssref/css3-pr-animation-name.html "CSS3 animation-name 屬性") | 規定 @keyframes 動畫的名稱。 | 3 | | [animation-duration](https://www.runoob.com/cssref/css3-pr-animation-duration.html "CSS3 animation-duration 屬性") | 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。 | 3 | | [animation-timing-function](https://www.runoob.com/cssref/css3-pr-animation-timing-function.html "CSS3 animation-timing-function 屬性") | 規定動畫的速度曲線。默認是 "ease"。 | 3 | | [animation-fill-mode](https://www.runoob.com/cssref/css3-pr-animation-fill-mode.html "CSS3 animation-fill-mode 屬性") | 規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。 | 3 | | [animation-delay](https://www.runoob.com/cssref/css3-pr-animation-delay.html "CSS3 animation-delay 屬性") | 規定動畫何時開始。默認是 0。 | 3 | | [animation-iteration-count](https://www.runoob.com/cssref/css3-pr-animation-iteration-count.html "CSS3 animation-iteration-count 屬性") | 規定動畫被播放的次數。默認是 1。 | 3 | | [animation-direction](https://www.runoob.com/cssref/css3-pr-animation-direction.html "CSS3 animation-direction 屬性") | 規定動畫是否在下一周期逆向地播放。默認是 "normal"。 | 3 | | [animation-play-state](https://www.runoob.com/cssref/css3-pr-animation-play-state.html "CSS3 animation-play-state 屬性") | 規定動畫是否正在運行或暫停。默認是 "running"。 | 3 | ## 示例無限播放 ``` div:hover { animation: 1s rainbow infinite; } ``` 指定次數 ``` div:hover { animation: 1s rainbow 3; } ```