---
tags: CSS,
disqus: hackmd
---

# CSS Animation|chrisHsiao

animation-name: @keyframes 動畫名稱;
animation-duration: 動畫時間;
animation-timing-function: 動畫進行的速度曲線;
animation-delay: 延遲動畫開始的時間
animation-iteration-count: 動畫重複次數;
animation-direction: 動畫播放方向;
animation-fill-mode: 動畫開始前後是否保持動畫設定;
animation-play-state: 控制動畫播放狀態;

---
縮寫：animation:name duration | timing-function | delay | iteration-count | direction | fill-mode | play-state;

範例：animation: honeyKeyframes 16s ease infinite alternate both;

---

span {
    animation-name: honeyKeyframes;
    animation-duration: 16s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: ease;
}

@keyframes honeyKeyframes {
    0% {
        color: red;
    }
    50% {
        color: #00FF5C;
    }
    100% {
        color: #00C3FF;
    }
  }

---

#### 參考文章
[完整解析 CSS 動畫 ( CSS Animation )](https://www.oxxostudio.tw/articles/201803/css-animation.html)

---
###### tags: `CSS` `animation` `keyframe`