こんにちは！WinスクールのMisonoです。
皆様にとって役立つ情報をお伝えできればと思います。今回はCSSを用いたアニメーションについてご紹介します！
目次
CSSとは？
CSS (Cascading Style Sheets) は、Webページの見た目を構築する言語です。
HTMLに対し、CSSで指定した設定を適用することで、Webページの見た目をデザインすることができます。CSSは1994年にホーコン・ウィウム・リーによって提唱され、1996年に12月に勧告されました。その後上位互換のCSS2が1998年5月、改訂版のCSS2.1が2011年6月に勧告されました。
現在のWebページでは主にCSS3（Cascading Style Sheets, level 3）が使用されています。
CSS3以降はCSS2.1以前と違い、機能別にモジュールという単位で分けられておりどの機能をWebブラウザが持つかどうかを決めることができるようになりました。
現在はCSS4モジュールの策定が進められています。
CSSアニメーションとは？
CSSはアニメーションを実装することもできます。
Webページにおいてアニメーションで何かを表現する場合、これまではgifアニメーション等の方法が用いられていました。
ただアニメーションのデータは容量が大きいためWebページの読み込み速度が遅くなるデメリットがあります。 そのためCSSでアニメーションの設定を行うことによりWebブラウザのパフォーマンス改善、またWebページの容量削減が実現可能です。
【実践】CSSアニメーションの実装方法
HTMLファイルを用意する
まずHTMLファイルを作成します。次にimgタグを用いて画像を表示させます。
※imgタグで指定する画像はどのようなものでも構いません。
<!DOCTYPE html>
<html>
<head>
<title>CSSアニメーション</title>
</head>
<body>
<div>ZZZ</div>
<br>
<img src="./uin_wait.jpg" />
</body>
</html>
ブラウザで開くとこのようになります。
このHTMLにCSSアニメーションを追加してみましょう！
CSSアニメーションの追加
アニメーションの設定を追加しましょう。
HTMLの<title>タグの下に<style>タグを追加し、それぞれプロパティを設定します。
※コード5行目～24行目
<!DOCTYPE html>
<html>
<head>
<title>CSSアニメーション</title>
<style>
div{
position:relative; /* 要素の配置を行う */
font-size:2rem; /* 文字の大きさを2remに */
animation: infinite; /* アニメーションを無限に繰り返す */
animation-name: sleep; /* キーフレームの定義。名前はsleep */
animation-duration: 2s; /* アニメーションの周期の長さ。1回2秒 */
}
/* アニメーションの設定 */
@keyframes sleep{
/* アニメーションの始まり */
from {
top:100px; /* 最初の位置は上から100pxの位置から */
}
/* アニメーションの終わり */
to {
top:0px; /* 終わりの位置は上から0pxの位置まで */
}
}
</style>
</head>
<body>
<div>ZZZ</div>
<br>
<img src="./uin_wait.jpg" />
</body>
</html>
記述ができたら保存してWebブラウザで読み込むと、設定したアニメーションが確認できます。
animationプロパティについて
今回使用したCSSのanimationプロパティについて確認しましょう。
animationプロパティはアニメーションを適用するプロパティです。このプロパティは下記プロパティを一括設定できるものです。
| プロパティ | 説明 |
|---|---|
| animation-delay | アニメーションをいつ開始するか設定 |
| animation-direction | アニメーション再生の向きはどうするか設定 |
| animation-duration | １回のアニメーション周期の時間を設定 |
| animation-fill-mode | アニメーション再生中と再生後のスタイルを設定 |
| animation-iteration-count | アニメーションを実行する回数を設定 |
| animation-name | キーフレームの設定 |
| animation-play-state | アニメーションが再生中、または一時停止か設定 |
| animation-timing-function | アニメーションの変化速度を設定 |
今回、わかりやすくするため一括指定のanimationと、上記単体のプロパティを複合させる方法を取りました。
では記述したプロパティを確認してみましょう。
animation: infinite; /* アニメーションを無限に繰り返す */
animation-name: sleep; /* キーフレームの定義。名前はsleep *j/
animation-duration: 2s; /* アニメーションの周期の長さ。1回2秒 */animationは先述した通り、一括設定のプロパティです。
本来はアニメーションの回数を指定するanimation-iteration-countプロパティの値のinfinte（無限に繰り返す）ですが、animationプロパティで記載することも可能です。
もしanimationプロパティに１行で設定する場合は下記の書き方になります。
animation: infinite sleep 2s;animationプロパティに慣れてきた場合はこの書き方でもよいでしょう。
また、animationプロパティではなく、animation-iteration-countプロパティを用いた場合は下記の通りです。
animation-iteration-count: infinite;
animation-name: sleep;
animation-duration: 2s;まとめ
CSSアニメーションを用いることにより、多彩な効果を得ることが可能です。まずは自分でコードを書いて動かしてみましょう。
さまざまなCSSアニメーションを使いこなせるようになればWebページに彩りを添えることができ、コーディングスキルもレベルアップ間違いなしです！
HTML･CSSの基本からレスポンシブデザインまで学べる
ホームページ制作(HTML5 & CSS3・スマホサイト制作）講座の詳細はこちらをチェック！
