可動畫屬性有哪些？

transform、opacity、color、width、height、border-radius 等。

名稱

免費線上 CSS 動畫產生器，免安裝。產生關鍵影格動畫，即時預覽

設定

名稱

持續時間 (s)

緩動

ease-out

方向

normal

迭代次數

起始狀態

opacity

transform

結束狀態

opacity

transform

結果

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  animation: slide-in 0.5s ease-out 1 normal;
}

預覽

Box

如果這個工具幫到了你，可以請作者喝杯咖啡。

請我喝杯咖啡

名稱

如何建立 CSS 動畫

更多工具

留言