動畫---CSS3 animation

動畫是CSS3中具備顛覆性的特徵之一，可經過設置多個節點來精確控制一個或一組動畫，經常使用來實現複雜的動畫效果。

語法格式：

animation:動畫名稱 花費時間 運動曲線  什麼時候開始  播放次數  是否反方向;

關於幾個值，除了名字，動畫時間，延時有嚴格順序要求其它隨意r

@keyframes 動畫名稱 {
  from{ 開始位置 }  0%
  to{  結束  }  100%
}

animation-iteration-count:infinite;  無限循環播放    默認是1次
animation-direction： alternate   動畫應該輪流反向播放    默認是 normal
animation-play-state:paused;   暫停動畫"

 

 

小汽車案例

body {
  background: white;
}
img {
  width: 200px;
}
.animation {
  animation-name: goback;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}
@keyframes goback {
  0%{}
  49%{
    transform: translateX(1000px);
  }
  55%{
    transform: translateX(1000px) rotateY(180deg);
  }
  95%{
    transform: translateX(0) rotateY(180deg);
  }
  100%{
    transform: translateX(0) rotateY(0deg);
  }
}