【CSS】animationを利用したアニメーション作成(応用)

【CSS】animationを利用したアニメーション作成(応用)

今回は、cssのanimationプロパティを使用した、時間で変化するアニメーション(keyframes)を使ったアニメーション制作例を紹介します。

Advertisement

CSSでanimationを利用したアニメーション例

CSSのanimationプロパティとkeyframesを使用することで、時間ごとに色や配置、大きさが細かく変化するアニメーションを作成することができます。他のCSSと組み合わせることで、自由な動きのアニメーションが作れます。
そんなkeyframesを使用したアニメーション例をいくつか紹介します。

animationプロパティでkeyframesを適用させる

実例を紹介する前に、簡単にkeyframesの使い方を紹介します。ご存じの方はスルーしてください。

下記が、animationとkeyframesを組み合わせて使用するときの記述例になります。

上記の記述例は、背景色(グラデーション)を動いているように見せる場合のアニメーションです。

動かしたいクラスに「animation」の「color 3s ease infinite」を指定していますが、これはアニメーション用のプロパティをまとめて指定しています。※一部の設定を省いていますが、よく使われるのがこのあたりのプロパティになります。

  • 「color」部分:animation-name
    →アニメーションのタイトル
  • 「3s」部分:animation-duration
    →アニメーション開始から終了までの時間
  • 「ease」部分:animation-timing-function
    →基本的なアニメーションの動きを指定
  • 「infinite」部分:animation-iteration-count
    →アニメーションの実行回数を指定
.move{
 background: rgb(255,255,255);
 background: linear-gradient(0deg, rgba(255,255,255,0.2) 2%, rgba(255,255,255,0.5) 10%, rgba(255,255,255,1) 20%);
 animation: color 3s ease infinite;
}
@keyframes color{
 0%{ background-position:0% 0%; }
 25%{ background-position:25% 25%; }
 50%{ background-position:50% 50%; }
 75%{ background-position:25% 25%; }
 100%{ background-position: 0% 0%; }
}

アニメーションの一括指定の内容は上記のとおりです。

アニメーションの使用例

前項のアニメーションの基本設定方法を踏まえた上で、いきなり応用編の制作例を説明します。

①グラデーションを時間ごとで変化させる

これは、前項で説明したグラデーションを動かすアニメーションとほぼ同じです。
複数の色を使用したグラデーションを時間ごとで動いているように見せています。

②車のスピードメーターの針の動きを再現

これは、svgで描画したスピードメーターのイラスト上で、針が動くようなアニメーションを指定しています。
針の中央部分を軸として、針のように回転させるアニメーションに見せています。

コーディングカテゴリの最新記事