寫個簡單css動畫,transition 和animate

語言: CN / TW / HK

先寫個普通的不動的球

.ball{
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background-color: #f69;
}
複製代碼

然後加上一個神奇的屬性transform,可以讓小球偏移原來的位置(transform有很多玩法,這裏展示移動)

.ball{
  /* ...  */
  transform: translate(200px,0);
}
複製代碼

transition:動作觸發,一次性動畫

讓其動起來

.ball{
  /* ...  */
  transform: translate(200px,0);
  transition: 1s linear;
}
.ball:hover{
  /* ...  */
  transform: translate(0,0);
}
複製代碼

transition的毛病就是,必須某種動作觸發(hover active巴拉巴拉),然後一次性動畫。

需要複雜些的動畫就需要animation

animation:隨時觸發,可控性很強

上面的換成animation:

  .ball {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    background-color: #f69;
    animation: move 2s linear;
  }

  @keyframes move {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(200px, 0);
    }
  }
複製代碼

animate

球一開始就運動,但是運動完之後,秒回動畫前的位置,也就是很突然的感覺,想改變的話,兩種方式:

  • 第一種常想到的方式:設置動畫的100%處就是動畫前的狀態,這樣結束時就和動畫前的狀態一致了。
  @keyframes move {
    0%,100% {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(200px, 0);
    }
  }
複製代碼
  • 第二種:設置動畫填充模式forwards,動畫結束之後,就讓小球在100%的狀態
/* backwards是有延遲時讓小球在動畫開始前,在0%的狀態。both是動畫開始前和結束後一個0%,一個100%的狀態 */
.box{animation: move 2s linear forwards;}
複製代碼

大牛老姚的animation的8個屬性的介紹,非常棒

無限播放:基本結合alternative

實現一直在動的話 animate2

.ball {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background-color: #f69;
  /* alternate很關鍵,正向和反向交替進行,先從0%->100%,然後100%->0%,這樣才有一直動的效果 */
  animation: move 2s linear alternate infinite;
}

@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(200px, 0);
  }
  
  
}
複製代碼