CSS Animation(動畫)可以讓你的HTML區塊增加動畫. Animation 可以讓你的網站更有互動, 會讓你的網頁更屌, 像這樣.

但是你不會css animation不用怕, 哥教你. CSS Animation 有三種 transition, transform, 跟keyframe.
順便分享一下, 這兩個很屌的網站的動畫是用css animation 處理的. 連結1 連結2

transition

Transition 可以讓你改變屬性在一個時間內. 廢話少說, 馬上來看例子. 以下的例子就是當滑鼠hover 過去的時候 width 這個屬性會從100px 變 300px, 然後持續時間是2s. CSS transition 我認為是最簡單的animation. 比較常在用的時候是用在button上, 當使用者hover 的時候執行一些animation.

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

div:hover {
    width: 300px;
}

transform

Transform 可以讓你改變, 轉動, 調正大小, 歪斜你的元件. Transform 有這些方法可以用

• translate() - 移動X, Y
• rotate() - 轉動
• scale() - 調正大小
• skewX() - 歪斜X-axis
• skewY() - 歪斜X-axis
• matrix() - 結合所有以上的功能 matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

// 把div 轉動20deg
div {
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg);
}

這是個skew 的例子.

keyframe

keyframe 是css 動畫的時間軸. 我們可以結合transition跟transform然後用keyframe然決定執行的時間. 那我們馬上來看個範例, codepen sunrise. 這是我用css animation 做出一個日出.

<div class="sun"></div>
<div class="grass"></div>


body {
  margin: 0 0 0 0;
  background-color: #2c3e50;
  animation-name: cycleskycolors;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0;
  
}

.grass {
  background: green;
  height: 600px;
  width: 100%;
  position: absolute;
}

.sun {
  background: #f1c40f;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  animation-name: sunmotion;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes cycleskycolors {
  0% {
    background-color: black;
  }
  10% {
    background-color: pink;
  }
  30% {
    background-color: blue;
  }
  70% {
    background-color: blue;
  }
  90% {
    background-color: pink;
  }
  100% {
    background-color: black;
  }
} 

@keyframes sunmotion {
  0% {
    transform: translate(-200px, 200px);
  }
  25% {
    transform: translate(330px, 0px);
  }
  50% {
    transform: translate(860px, -50px);
  }
  100% {
    transform: translate(1920px, 200px);
  }
  
} 

這整個動畫我定義兩個animation: sunmotion, cycleskycolors. sunmotion 來管理太陽的位子, 然後再 0%, 25%, 50%, 100%在不一樣的位子. cycleskycolors來管理天空的顏色,在不同時刻顯示黑,粉紅, 藍.

參考連結

• w3c css animation
• w3c css transitions
• mozilla css animation property
• mozilla css animation