本文へスキップ
Anim

CSSアニメーション生成

keyframes を GUI で作成。

キーフレーム

@keyframes fadeSlide {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(12px);
    opacity: 0.4;
  }
}

.animated {
  animation-name: fadeSlide;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
}

CSSアニメーション生成について

名前・duration・timing・iteration とストップを指定してアニメーション CSS を得ます。処理はブラウザ内で完結します。

使い方

  1. キーフレームを調整
  2. プレビューを確認
  3. CSSをコピー

よくある質問（FAQ）

無料？

はい。

送信される？

いいえ。