初心者も使えるCSSアニメーションの基本

Web制作

2019年01月04日

「WEBサイトの1部分をアニメーションさせたい」と考えるとjavascriptやjQueryが必要になると思いますよね。

少し前だとFlashを使ってアニメーションさせるのが主流でした。

しかし、現在ではCSS3の機能拡充のおかげで難しいjavascriptやjQueryやFlashなどを使わなくてもアニメーションさせることも可能です。
(アニメーションをおこなうタイミングを指定するとなると、javascriptやjQueryが必要になります。)

「簡単にアニメーションをつくりたい」「かっこいい動きを簡単に実装したい」という方にCSSでのアニメーションがおすすめです。

今回は、CSSを使ったアニメーションについて説明します。

今まで触ったことがない方もぜひ参考にしてください。

「keyframes」を理解する

CSSアニメーションを使用する上で必要になるのが、「keyframes」です。

keyframesは、開始から終了までどのようなアニメーションをするのかを指定できるCSSになります。

keyframesを使用することで、より細かいアニメーションの変化やタイミングなどを指定できます。

keyframesは、このように記述します。

@keyframes 任意の名前 {
    0% {
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
    }

     50% {
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
    }

    100% {
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
    }
}

上記のように記述することで、「0%」「50%」「100%」の段階でのアニメーションを指定できます。

パーセントをより細かく設定することでより細かい設定も可能です。

簡易的にアニメーションを作成したい場合は下記のコードのように「0%」「100%」の設定だけでもOKです。

@keyframes 任意の名前 {
    0% {
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
    }

    100% {
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
    }
}

keyframesを使うときは、下記のように記述します。

animation-name: 任意の名前;

例えば、下記のように「fadeIn」というkeyframesを設定した場合は「animation-name: fadeIn;」と記述します。

.sample{
	animation-name: fadeIn;
}
@keyframes fadeIn {
  0%   { opacity: 0; } 
  100% { opacity: 1; }
}

CSSアニメーションのプロパティを理解する

CSSアニメーションを実装するにはいくつもあるCSSアニメーションのプロパティを理解しなければなりません。

プロパティを理解するためにも実際のコードを用いて説明します。

今回はこのようなコードを用意しました。

<style>
.sample p {
	color: #333;
	font-size: 18px;
	padding: 100px 0 0 900px;
	animation-name:keiziban;
	animation-timing-function:linear;
	animation-duration:8s;
	animation-iteration-count:infinite;
}
@keyframes keiziban {
  from   { transform: translateX(0%);} 
  100% { transform: translateX(-100%);}
}
</style>
<body>

<div class="sample">
	<p>これはCSSアニメーションのサンプルです。</p>
</div>

上記のコードをブラウザで確認すると、このような表示になります。

CSSアニメーション

上記のコードは電光掲示板のように文字を右から左へ流すことができるコードです。

keyframesには、「keiziban」という名前をつけて、「animation-name:keiziban;」でアニメーションを読み込んでいます。

アニメーションする時間は8秒間で一定速度で無限回数するように設定しています。

animation-durationプロパティ

アニメーションの時間を設定するのが、「animation-duration」です。

これは、アニメーションが始まって終わるまでの時間を指定します。

animation-durationは「s」もしくは「ms」で記述します。

「s」は、「1s」で1秒、「ms」は「1000ms」で1秒です。

つまり、「1ms」は1000分の1秒になります。

先ほどのコードを「8s」から「1s」にすると、アニメーションがとても速くなります。

<style>
.sample p {
	color: #333;
	font-size: 18px;
	padding: 100px 0 0 900px;
	animation-name:keiziban;
	animation-timing-function:linear;
	animation-duration:8s;
	animation-iteration-count:infinite;
}
@keyframes keiziban {
  from   { transform: translateX(0%);} 
  100% { transform: translateX(-100%);}
}
</style>
<body>

<div class="sample">
	<p>これはCSSアニメーションのサンプルです。</p>
</div>

このようにアニメーションを速くさせたり遅くさせたりできるのが、「animation-duration」の特徴です。

注意点は、値が「0」のときの記述です。

「padding」「margin」「top」「bottom」「left」「right」などは値が「0」のとき「0」と記述すれば大丈夫ですが、「animation-duration」の場合値が「0」のときは「0s」と記述しなければなりません。

下記のコードのように値が「0」の場合でも、単位の「s」をつけましょう。

また、初期値では「0s」に設定されています。

<style>
.sample{
	padding: 0;
	margin: 0;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	animation-duration: 0s;/*必ず単位をつける*/
}
</style>

animation-iteration-countプロパティ

「animation-iteration-count」は、アニメーションさせる回数を指定します。

仮に、アニメーションを3回したい場合は「animation-iteration-count: 3;」と記述すれば大丈夫です。

下記のコードではアニメーションを3回させるように指定しています。

「animation-iteration-count」の初期値は1回に設定されています。

無限に繰り返したい場合は、「infinite」と指定することで繰り返しアニメーションが再生することが可能です。

animation-timing-functionプロパティ

「animation-timing-function」は、アニメーションの変化の度合いを指定できるプロパティです。

初心者が間違いやすいのが「animation-timing-function」と「animation-duration」になります。

「animation-duration」は、アニメーションの時間を設定するモノで度合いは指定できません。

「animation-timing-function」は、アニメーションの変化の度合いを指定するモノで時間は指定できません。

この部分は間違いやすいので注意しましょう。

下記のコードで指定している「linear」は、アニメーションの開始から終了まで一定時間で変化する値です。

<style>
.sample p {
	color: #333;
	font-size: 18px;
	padding: 100px 0 0 900px;
	animation-name:keiziban;
	animation-timing-function:linear;
	animation-duration:8s;
	animation-iteration-count:infinite;
}
@keyframes keiziban {
  from   { transform: translateX(0%);} 
  100% { transform: translateX(-100%);}
}
</style>
<body>

<div class="sample">
	<p>これはCSSアニメーションのサンプルです。</p>
</div>

「animation-duration」の値で有名なのは、以下の5つです。

・ease(初期値)・・・アニメーションの開始時と終了時はゆっくりと変化する
・ease-in・・・アニメーションの開始時はゆっくりと変化して、終了時は速く変化する
・ease-out・・・アニメーションの開始時は速く変化して、終了時はゆっくりと変化する
・ease-in-out・・・「ease」よりもアニメーションの開始時と終了時はとてもゆっくりと変化する
・linear・・・アニメーション開始時から終了時まで一定に変化する

初心者の方はこの5つを中心に設定するのがおすすめです。

しかし、設定できるアニメーションの変化はコレだけではありません。

・easeInSine
・easeOutSine
・easeInOutSine
・easeInQuad
・easeOutQuad
・easeInOutQuad
・easeInCubic
・easeOutCubic

などを設定することもできます。

「animation-timing-function」は、色々な設定が用意されています。

こちらのサイトでは様々な「animation-timing-function」の設定を紹介しているので、ぜひ参考にしてください。

animation-timing-function早見表サイトURL:https://easings.net/ja

「animation-timing-function」は用意された設定だけでなく、自分でオリジナルの設定をつくることも可能です。

オリジナルの設定は、easingのベジェ曲線を使って設定可能です。

ベジェ曲線の作成方法は、大きく分けて2つあります。

1つ目の方法は、Chromeの開発者ツールを使う方法です。

まず、「animation-timing-function」を適用している箇所を要素検証します。

CSSアニメーション

「animation-timing-function」の右側に表示されているアイコンをクリックします。

このアイコンをクリックすると、このようなグラフが表示されます。

CSSアニメーション

円の部分を操作することで、変化の具合を自在に操作可能です。

CSSアニメーション

この方法のメリットはChromeで実際に動きを確認できるところです。

しかし、操作画面が小さいので、少し操作しにくいのがデメリットになります。

2つ目の方法がeasingのベジェ曲線のジェネレーターを使用する方法です。

このサイトを利用することで、自分の制作したいベジェ曲線を制作できます。

easingのベジェ曲線のジェネレーターURL:http://cubic-bezier.com/#.17,.67,.83,.67

作成したベジェ曲線は、このように数値を入れることで実装できます。

<style>
.sample p {
	color: #333;
	font-size: 18px;
	padding: 100px 0 0 900px;
	animation-name:keiziban;
	animation-timing-function: cubic-bezier(0, 0.9, 0.24, 1.2);
	animation-duration:8s;
	animation-iteration-count:infinite;
}
@keyframes keiziban {
  from   { transform: translateX(0%);} 
  100% { transform: translateX(-100%);}
}
</style>
<body>

<div class="sample">
	<p>これはCSSアニメーションのサンプルです。</p>
</div>

animation-delay プロパティ

animation-delayプロパティは、アニメーションの開始時間を指定できるプロパティです。

animation-durationプロパティと同じように時間を指定して、設定するのが特徴。

例えば、下記のようなコードを記述した場合、「sample2」のクラス(2行目の方)は2秒後にアニメーションが開始されます。

<style>
.sample p {
	color: #333;
	font-size: 18px;
	padding: 100px 0 0 900px;
	animation-name:keiziban;
	animation-timing-function:linear;
	animation-duration: 10s;
	animation-iteration-count:infinite;
}
@keyframes keiziban {
  from   { transform: translateX(0%);} 
  100% { transform: translateX(-100%);}
}

.sample2 p {
	color: #333;
	font-size: 18px;
	padding: 100px 0 0 900px;
	animation-name:keiziban;
	animation-timing-function:linear;
	animation-duration: 10s;
	animation-iteration-count:infinite;
	animation-delay: 2s;
}
@keyframes keiziban {
  from   { transform: translateX(0%);} 
  100% { transform: translateX(-100%);}
}
</style>
<body>

<div class="sample">
	<p>これはCSSアニメーションのサンプルです。</p>
</div>
<div class="sample2">
	<p>これはCSSアニメーションのサンプルです。</p>
</div>
</body>

animation-directionプロパティ

animation-directionプロパティは、アニメーションの指定方向を設定できるプロパティです。

animation-directionプロパティの値は以下の4つがあります。

・normal(初期値)・・・指定した方向にアニメーションが毎回再生される
・reverse・・・指定した方向とは逆のアニメーションが毎回再生される
・alternate・・・指定した方向→指定した方向とは逆の方向の順番でアニメーションが毎回再生される
・alternate-reverse・・・指定した方向とは逆の方向→指定した方向でアニメーションが毎回再生される

animation-directionプロパティにそれぞれの値を設定すると、下記のコードのようになります。

<style>
.sample p {
	color: #333;
	font-size: 18px;
	padding: 100px 0 0 900px;
	animation-name:keiziban;
	animation-timing-function:linear;
	animation-duration: 10s;
	animation-iteration-count:infinite;
	animation-direction: normal;
}

.sample2 p {
	color: #333;
	font-size: 18px;
	padding: 100px 0 0 900px;
	animation-name:keiziban;
	animation-timing-function:linear;
	animation-duration: 10s;
	animation-iteration-count:infinite;
	animation-direction: reverse;
}

.sample3 p {
	color: #333;
	font-size: 18px;
	padding: 100px 0 0 900px;
	animation-name:keiziban;
	animation-timing-function:linear;
	animation-duration: 10s;
	animation-iteration-count:infinite;
	animation-direction: alternate;
	
}

.sample4 p {
	color: #333;
	font-size: 18px;
	padding: 100px 0 0 900px;
	animation-name:keiziban;
	animation-timing-function:linear;
	animation-duration: 10s;
	animation-iteration-count:infinite;
	animation-direction: alternate-reverse;
	
}

@keyframes keiziban {
  from   { transform: translateX(0%);} 
  100% { transform: translateX(-100%);}
}
</style>
<body>

<div class="sample">
	<p>これはCSSアニメーションのサンプルです。</p>
</div>
<div class="sample2">
	<p>これはCSSアニメーションのサンプルです。</p>
</div>
<div class="sample3">
	<p>これはCSSアニメーションのサンプルです。</p>
</div>
<div class="sample4">
	<p>これはCSSアニメーションのサンプルです。</p>
</div>
</body>

ブラウザでは、このように表示されます。

CSSアニメーション

animation-fill-modeプロパティ

animation-fill-modeプロパティは、アニメーション開始前と終了後のスタイルを指定できるプロパティです。

animation-fill-modeプロパティの値は、以下の4つがあります。

・none(初期値)・・・アニメーションの開始前と終了後には、指定したスタイルが適用されない
・forwards・・・アニメーション終了後には、指定したスタイルが適用される
・backwards・・・アニメーション開始時のスタイルがアニメーション開始前にも適用される
・both・・・アニメーション開始時のスタイルがアニメーション開始前にも適用され、アニメーション終了後には、指定したスタイルが適用される(forwards+backwards)

下記のコードでanimation-fill-modeプロパティの値をそれぞれに適用させるとこのようになります。

<style>
.box1 {
	width: 100px;
	height: 100px;
	background: #333;
	margin: 100px 0 0 900px;
	animation-name: box;
	animation-timing-function:linear;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-fill-mode: none;
}

.box2 {
	width: 100px;
	height: 100px;
	background: #333;
	margin: 100px 0 0 900px;
	animation-name: box;
	animation-timing-function:linear;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.box3 {
	width: 100px;
	height: 100px;
	background: #333;
	margin: 100px 0 0 900px;
	animation-name: box;
	animation-timing-function:linear;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-fill-mode: backwards;
}

.box4 {
	width: 100px;
	height: 100px;
	background: #333;
	margin: 100px 0 0 900px;
	animation-name: box;
	animation-timing-function:linear;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

@keyframes box {
  from   { transform: translateX(0%);} 
  100% { transform: translateX(-400%); background: red;}
}
</style>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
</body>

ブラウザで確認するとこのようになります。

CSSアニメーション

「box1」と「box3」はアニメーション終了後には、アニメーション開始前のスタイルが適用されています。

「box2」と「box4」はアニメーション終了後には、アニメーション終了後のスタイルが適用されています。

このようにアニメーション終了後に適用させるスタイルで値を選択してください。

まとめ

いかがでしたか?

CSSアニメーションを使用することでワンランク上のWEBサイトを作ることができます。

ぜひ1度試してみてはいかがでしょうか。

今すぐ無料で見積もりを依頼する

「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」
そんな時は、制作会社様とのやり取りに特化した、信頼と安心のくまwebにご依頼ください。

カテゴリ

最新記事

今すぐ無料でお見積もりを依頼する

「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。