今回は、cssのanimationプロパティを使用した、時間で変化するアニメーション（keyframes）を使ったアニメーション制作例を紹介します。
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で描画したスピードメーターのイラスト上で、針が動くようなアニメーションを指定しています。
針の中央部分を軸として、針のように回転させるアニメーションに見せています。
前へ
