CSS Animationでアニメーションを表現する

PR　当ページのリンクには広告が含まれています。

CSS Animation

CSSにanimationと@keyframesを記述してアニメーションの設定をします。
まずは点滅するオブジェクトを作ってみました。

@keyframes

キーフレームは0％（アニメーションの開始）から100％（終わり）まで細かく指定できます。

@keyframes anime_name {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

anime_name の部分は任意です。

セレクタ {
    animation-name: anime_name;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

• sample

はじめは透明、2秒かけて不透明になるフェードインを繰り返すアニメーションになります。

このようにanimationプロパティとkeyframesの設定によってさまざまなアニメーションを表現できます。

CSS Animationで設定できること

animation-name

キーフレームの名前

animation-duration

アニメーションの長さ　※時間の単位は　1s＝1000ms＝1秒

animation-timing-function

開始～終了までの変化のしかた。ease(初期値)、ease-in、ease-out、ease-in-out、linearなど

animation-delay

アニメーション開始までの時間

animation-iteration-count

繰り返す回数。無限の場合infinite

animation-direction

アニメーションの向き　normal、reverse（逆方向）、alternate（交互）、alternate-reverse（逆方向で交互）

animation-fill-mode

アニメーション前後のスタイル
none：アニメーション開始前と後、スタイルを適用しない
forwards：アニメーション終了のスタイルのまま
backwards：アニメーション開始時のスタイルが開始前のスタイル
both　アニメーション開始前と後、両方にスタイルを適用

animation-play-state

アニメーションの再生・停止　running(初期値)、paused

ショートハンドプロパティ

半角スペースを入れて記述します。（animation-duration、animation-delay以外は順不同）

セレクタ {animation: animation-name 5s ease-out 1s infinite alternate forwards running;}

複数プロパティ

カンマを入れてまとめて記述します。

セレクタ {animation: animation-name01 2s, animation-name02 5s infinite;}

CSS Animation Sample

• 雲がぷかぷか浮かぶ
  アニメーション

  

• セレクタ {animation:cloud 3s ease-in infinite alternate both;}
  @keyframes cloud{
    0% {
      transform:translate(2px,30px);
    }
    100% {
      transform:translate(-2px,0px);
    }
  }

   

• 雲が流れるアニメーション

• セレクタ{
  animation:cloud02 20s linear infinite; 
  background:url(https://design-webnote.com/wp02/wp-content/themes/lightning-child/images/cloud.png);
  background-size: 100px;
  background-repeat: no-repeat;
  width: 100%;
  height: 100px;
  }
  @keyframes cloud02{
  0% {background-position: 400px 0;}
  100% {background-position:-100px 0;}
  }