「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>
上記のコードをブラウザで確認すると、このような表示になります。
上記のコードは電光掲示板のように文字を右から左へ流すことができるコードです。
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」を適用している箇所を要素検証します。
「animation-timing-function」の右側に表示されているアイコンをクリックします。
このアイコンをクリックすると、このようなグラフが表示されます。
円の部分を操作することで、変化の具合を自在に操作可能です。
この方法のメリットは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>
ブラウザでは、このように表示されます。
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>
ブラウザで確認するとこのようになります。
「box1」と「box3」はアニメーション終了後には、アニメーション開始前のスタイルが適用されています。
「box2」と「box4」はアニメーション終了後には、アニメーション終了後のスタイルが適用されています。
このようにアニメーション終了後に適用させるスタイルで値を選択してください。
まとめ
いかがでしたか？
CSSアニメーションを使用することでワンランク上のWEBサイトを作ることができます。
ぜひ1度試してみてはいかがでしょうか。