CSSアニメーションチュートリアル

CSSアニメーションは、CSSトランジションのような単一の動きに限らず、より明確に表現された視覚的なアニメーションを作成するための優れた方法です。アニメーションは、を使用して要素に適用されますanimationプロパティ

前書き

アニメーションは、を使用して要素に適用されますanimationプロパティ。

.container {
  animation: spin 10s linear infinite;
}

spinはアニメーションの名前であり、個別に定義する必要があります。また、CSSに、アニメーションを10秒間持続させ、直線的に実行し(加速や速度の違いがない)、無限に繰り返すように指示します。

絶対ですアニメーションの仕組みを定義するを使用してキーフレーム。アイテムを回転させるアニメーションの例:

@keyframes spin {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

内部@keyframes定義では、必要な数の中間ウェイポイントを持つことができます。

この場合、CSSに、Z軸を0から360グレードに回転するように変換プロパティを作成するように指示し、完全なループを完了します。

ここでは、任意のCSS変換を使用できます。

これが、アニメーションがとるべき時間間隔について何も指示しないことに注意してください。これは、を介して使用するときに定義されますanimation

CSSアニメーションの例

開始点が共通で、すべて90度離れた4つの円を描きたいと思います。

<div class="container">
  <div class="circle one"></div>
  <div class="circle two"></div>
  <div class="circle three"></div>
  <div class="circle four"></div>
</div>
body {
  display: grid;
  place-items: center;
  height: 100vh;
}

.circle { border-radius: 50%; left: calc(50% - 6.25em); top: calc(50% - 12.5em); transform-origin: 50% 12.5em; width: 12.5em; height: 12.5em; position: absolute; box-shadow: 0 1em 2em rgba(0, 0, 0, 0.5); }

.one, .three { background: rgba(142, 92, 205, 0.75); }

.two, .four { background: rgba(236, 252, 100, 0.75); }

.one { transform: rotateZ(0); }

.two { transform: rotateZ(90deg); }

.three { transform: rotateZ(180deg); }

.four { transform: rotateZ(-90deg); }

あなたはこのグリッチでそれらを見ることができます:https://glitch.com/edit/#!/flavio-css-circles

この構造(すべての円を一緒に)を回転させましょう。これを行うには、コンテナにアニメーションを適用し、そのアニメーションを360度の回転として定義します。

@keyframes spin {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

.container { animation: spin 10s linear infinite; }

でそれを参照してくださいhttps://glitch.com/edit/#!/flavio-css-animations-tutorial

キーフレームをさらに追加して、より面白いアニメーションを作成できます。

@keyframes spin {
  0% {
    transform: rotateZ(0);
  }
  25% {
    transform: rotateZ(30deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  75% {
    transform: rotateZ(180deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

上の例を参照してくださいhttps://glitch.com/edit/#!/flavio-css-animations-four-steps

CSSアニメーションのプロパティ

CSSアニメーションには、微調整できるさまざまなパラメーターが用意されています。

プロパティ 説明
animation-name アニメーションの名前。を使用して作成されたアニメーションを参照します。@keyframes
animation-duration アニメーションの持続時間(秒単位)
animation-timing-function アニメーションで使用されるタイミング関数(一般的な値:linearease)。デフォルト:ease
animation-delay アニメーションを開始する前に待機するオプションの秒数
animation-iteration-count アニメーションを実行する回数。数を期待する、またはinfinite. Default: 1
animation-direction アニメーションの方向。することができますnormalreversealternateまたはalternate-reverse。最後の2つでは、前方と後方に交互に移動します
animation-fill-mode 反復カウント数が終了した後、アニメーションが終了したときに要素のスタイルを設定する方法を定義します。noneまたはbackwards最初のキーフレームスタイルに戻ります。forwardsそしてboth最後のキーフレームで設定されたスタイルを使用します
animation-play-state に設定されている場合paused、アニメーションを一時停止します。デフォルトはrunning

ザ・animationプロパティは、これらすべてのプロパティの省略形で、次の順序で表示されます。

.container {
  animation: name duration timing-function delay iteration-count direction
    fill-mode play-state;
}

これは、上記で使用した例です。

.container {
  animation: spin 10s linear infinite;
}

CSSアニメーションのJavaScriptイベント

JavaScriptを使用すると、次のイベントをリッスンできます。

  • animationstart
  • animationend
  • animationiteration

注意してくださいanimationstart、アニメーションがページの読み込み時に開始される場合、JavaScriptコードは常にCSSが処理された後に実行されるため、アニメーションはすでに開始されており、イベントをインターセプトすることはできません。

const container = document.querySelector('.container')
container.addEventListener(
  'animationstart',
  (e) => {
    //do something
  },
  false
)
container.addEventListener(
  'animationend',
  (e) => {
    //do something
  },
  false
)
container.addEventListener(
  'animationiteration',
  (e) => {
    //do something
  },
  false
)

CSSアニメーションを使用してアニメーション化できるプロパティ

たくさん!これらは、CSSトランジションを使用してアニメーション化できるものと同じです。

完全なリストは次のとおりです。

プロパティ
バックグラウンド
背景色
背景位置
背景サイズ
境界
ボーダの色
ボーダー幅
ボーダーボトム
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-width
ボーダー左
ボーダー-左-色
border-left-width
ボーダー半径
ボーダー右
ボーダー-右-色
border-right-width
ボーダー間隔
ボーダートップ
ボーダートップカラー
border-top-left-radius
border-top-right-radius
border-top-width
ボックスシャドウ
キャレットカラー
クリップ
列数
列ギャップ
列ルール
列-ルール-色
列ルール幅
列幅
コンテンツ
フィルタ
フレックス
フレックスベース
フレックスグロー
フレックスシュリンク
フォント
フォントサイズ
font-size-adjust
フォントストレッチ
フォントの太さ
グリッドエリア
grid-auto-columns
グリッド-自動フロー
grid-auto-rows
grid-column-end
グリッド-列-ギャップ
grid-column-start
グリッド-列
グリッドギャップ
grid-row-end
グリッド-行-ギャップ
grid-row-start
グリッド行
grid-template-areas
grid-template-columns
grid-template-rows
グリッドテンプレート
グリッド
高さ
文字間隔
行の高さ
マージン
マージンボトム
マージン左
マージン右
マージントップ
最大高さ
最大幅
最小の高さ
最小幅
不透明度
注文
概要
アウトラインカラー
アウトラインオフセット
アウトライン幅
パディング
パディングボトム
パディング-左
パディング-右
パディングトップ
視点
遠近法-起源
引用符
正しい
タブサイズ
テキスト装飾
テキスト-装飾-色
テキストインデント
テキストシャドウ
変換します。
垂直整列
視認性
単語間隔
z-index

私の無料ダウンロードCSSハンドブック


その他のCSSチュートリアル: