CSS 動畫 & 漸變超入門

4 min readJul 7, 2020

設計師和開發者都需要熟悉的知識和技能

動畫 & 漸變效果是現代網頁/APP 不可或缺的元素, 不管是設計師還是開發者/工程師, 都需要曉得怎樣讓組件動起來. 主流框架比如 VueJS, ReactJS 也都自己產生動畫的方式; 比如在 VueJs 中用 <transistion> 標籤把要動的組件包起來; 至於 ReactJS, 現在有太多先進的動畫程式庫專門為其量身打造, 比如現在最火紅的 Framer Motion, 以及 React Spring, GSAP 等動畫函式庫.

要讓元件動起來的方式就是在元件的樣式中加入 animation / transition 屬性

設置元件 animation 屬性

animation-name : 動畫名稱, 例如 myanimation
animation-duration : 動畫持續時間, 1000ms 表示 1 秒
animation-iteration-count : 動畫播放次數
animation-fill-mode : forwards; 動畫結束維持最後狀態
animation-delay : 延後播放動畫時間
animation-direction: alternate; 逆向播放動畫
animation-timing-function : 動畫模式, 有 ease-in, ease-out, linear, cubic-bezier 等

範例: 在 h1 標籤設置動畫屬性

h1 {
  animation-name: myanimation;      
  animation-duration: 1000ms; 
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}

使用 keyframes 撰寫動畫內容

@keyframes myanimation {
  0% { background-color: white; left: 0px; top: 0px; }
  50% { background-color: green; left: 300px; top: 300px; }
  100% { background-color: white; left: 0px; top: 0px; }
}

設置元件 transition 屬性

和 animation 不同之處在於 transition 需要被觸發, 最常看到的例子是 button hover 效果,

在 button 元件設置 transition 屬性

transition-property : 設置要漸變的 css 屬性
transition-duration : 漸變持續時間, 比如 1000ms 等於 1 秒
transition-timing-function: 漸變模式, 同 animation
transition-delay : 延後漸變時間

範例: 在 button 標籤設置漸變屬性

button {
  transition-property: background, border-radius, transform;
  transition-duration: 1000ms;
  transition-timing-function: ease-out;
}

當 button 是 hover 的狀態設置要漸變的 css 屬性

button:hover {
  background: red;
  border-radius: 50%;
  transform: rotateY(180deg) scale(0.8) translate(100px, 200px);
}

基本上就是這樣, 現在的原型都加入很多很酷炫, 很複雜的動畫, 所以身為開發者/工程師必須熟悉動畫/漸變製作才能符合變動超級快速的前端世界 !!!

Demo 網址 : https://css-animation-transition-demo.netlify.app/