アニメーション可能なプロパティは？

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

このツールが役に立ったら、作者にコーヒーをおごってください。

コーヒーをおごる

データ容量変換 JWT エンコーダー/デコーダー Chmod 計算機 CSS スプライト生成テキスト統計アナライザー User-Agentパーサー CSS backdrop-filterジェネレーター特性要因図

名前

CSSアニメーションの作成方法

もっと見る

コメント