基於css3動畫實現的旅行的小車

旅行的小車.gif

小丸子.gif

抱歉，用工具生成的gif有點卡，小車的輪子都轉不利索了，完整demo可以點選文章最底下的［demo展示中心］。

這兩個demo的所有元素和動效都是由html＋css實現的
css動畫實現：

1.animation: css3新增屬性，有多個屬性值
例：輪子轉動
  &.wheel{
     left:  106px;
     animation:  wheel  0.4s  infinite  linear;  
  }
  @keyframes wheel{
    0%{ 
      top: -23px;
      transform:rotate(0deg);
      width: 35px;
    }
    100%{ 
      top: -25px;
      transform:rotate(360deg);
      width: 38px;
    }
}
說明：wheel是animation指定的動畫名稱
     infinite表示動畫播放無限次
     linear指定動畫從頭至尾速度相同
     在@keyframes中指定動畫週期中每個時間段具體的動畫效果，動畫週期時段可由百分比控制，也可由from、to來表示。

2. transition: css3屬性，處理動效的過渡效果
例：漸變效果
.change{
  opacity: 0;
  transition: opacity 1s;
}
說明：
  transition-property 指定過渡的效果元素，如：width，height，opacity等
  transition-duration 表示過渡的週期（秒／毫秒），如上述例子的1s
  transition-timing-function 規定速度效果的速度曲線
  transition-delay  規定動效的開始時間

剩下的一些無非是對於元素的旋轉、縮放等處理，用transform等屬性即可實現。

[小丸子demo]：https://yomonah.github.io/project/app.html#/wanzi
[旅行小車demo]：https://yomonah.github.io/project/app.html#/car
[小丸子原始碼]：https://github.com/yomonah/react-demo/tree/master/src/components/wanzi
[旅行小車原始碼]：https://github.com/yomonah/react-demo/tree/master/src/components/car