CSSアニメーションは慣れると手軽に活用できます。
まずはお手軽に、書いてしまいましょう。
このサイトでは、まず、テキストを中心に基本的な10個のアニメーションを作ってみました。
デモを見ながら、WEBサイトにどの動きを取り入れるのが良いか参考にしてみてください。
もちろん、組み合わせたりもできますので、ご自由にCSSのコードを変更してください。
ややこしい話は後で書きます（笑）。
コードの書き方
CSSアニメーションのプロパティはたくさんあります。
しかし、6つのプロパティをまとめたショートハンドを使えば簡単に記述できます。
別に6つ全てを指定する必要さえありません。指定しない場合は、初期値が使われますから、不要というわけです。
6つのプロパティとはこの6つです。
animation-name 名前
animation-duration 変化にかかる秒数
animation-timing-function イージング
animation-delay 開始まで遅らせる秒数
animation-iteration-count 繰り返し回数（無限はinfinite）
animation-direction 反転はalternate 通常はnormal
しかし、なかなか覚え切れないので、私は、「名前」と「変化にかかる秒数」と「繰り返し回数」ぐらいを基本的に使います。
その上で、少し動き方に変化をつけたい時や、(初期値が「ease」なので)逆に等速度で変化させたい時は、イージングを指定します。
また、アニメーションの開始を遅らせたい時は、animation-delayを入れたりします。
「イージング」というのは、変化の態様とでも言い直せるでしょうか。初めはゆっくりで後から速くなど、アニメーションが起きている間の変化の速度を指定することができます。
.sample {animation: demo1 3s infinite;}
@keyframes demo1 {
0% {color: blue;}
100% {color: red;}
}
こういうのが最も単純な記述ではないでしょうか。
全てここから変更していけばいろいろなアニメーションを実現できます。
この場合をご説明すると、sampleというクラス名の付いた要素に対して、アニメーションを指定しています。
animationの名前は「demo1」でそれを受けて、@keyframes demo1 { }のところで、具体的な動きを指定します。
「3s」はアニメーションにかける時間です。大きくすれば、ゆっくりとした動きになり、小さくすれば素早い変化となります。
「infinite」は無限に繰り返させる指定です。回数を指定したい時は、数字を入れてください。
「@keyframes」では、例にあるように、0%で最初の状態、100%で最後の状態を指定します。
0と100の間の数字で途中の過程を指定することもできます。
また、CSSプロパティも複数指定することができます。
では、10個の具体例を見ていきましょう。
その前に最初に、全部のコードを書いておきます。
<html>
<head>
<style>
ul {list-style-type: none;}
li {float: left;}
table {width: 46vmin; height: 230px; border: 1px #333 solid; border-collapse: collapse; table-layout: fixed;}
table th {height: 30px; border: 1px #333 solid;}
table td {height: 200px; border: 1px #333 solid;}
.demo1 {font-size: 50px; color: #390; text-align: center; opacity: 0; animation: demo1 5s infinite;}
@keyframes demo1{
0% {opacity: 0;}
100% {opacity: 1;}
}
.demo2 {font-size: 50px; color: red; text-align: center;}
.p2 {animation: demo2 2s infinite;}
@keyframes demo2{
0% {margin-top: -110px; opacity: 0;}
100% {margin-top: -70px; opacity: 1;}
}
.demo3 {color: blue; text-align: center;}
.p3 {animation: demo3 2s infinite;}
@keyframes demo3{
0% {transform: rotate(0); font-size: 20px;}
100% {transform: rotate(360deg); font-size: 50px;}
}
.demo4 {font-size: 50px; color: blue; text-align: center; animation: demo4 2s infinite;}
@keyframes demo4{
0% {color: yellow;}
50% {color: orange;}
100% {color: red;}
}
.demo5 {font-size: 50px; color: green; text-align: center; animation: demo5 2s infinite;}
@keyframes demo5{
0% {transform: scale(1,1);}
100% {transform: scale(1.3,1.5);}
}
.demo6 {font-size: 50px; color: #333; text-align: center; animation: demo6 2s infinite;}
@keyframes demo6{
0% {text-shadow: 0 0 0 #F00;}
100% {text-shadow: 4px 4px 2px #F00;}
}
.demo7 {font-size: 20px; color: #05D; text-align: center; white-space: nowrap; overflow: hidden;}
.p7 {animation: demo7 2s linear infinite;}
@keyframes demo7{
0% {margin-left: 300px;}
70% {margin-left: -20px;}
72% {margin-left: 0px;}
100% {margin-left: 0px;}
}
.demo8 {font-size: 34px; color: #333; text-align: center;}
.p8 {animation: demo8 2s infinite;}
@keyframes demo8{
0% {transform: rotateY(90deg);}
100% {transform: rotateY(0deg);}
}
.demo9 {font-size: 45px; color: #333; text-align: center;}
.p9 {animation: demo9 2s infinite; transform-origin: bottom;}
@keyframes demo9{
0% {transform: rotateX(90deg);}
100% {transform: rotateX(0deg);}
}
.demo10 {font-size: 50px; color: orange; text-align: center; animation: demo10 1s infinite;}
@keyframes demo10{
0% {transform: skewX(30deg);}
50% {transform: skewX(-30deg);}
100% {transform: skewX(30deg);}
}
</style>
</head>
<body>
<ul class="mysort">
<li>
<table>
<tr>
<th>DEMO1</th>
</tr>
<tr>
<td class="demo1">
北海道
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th>DEMO2</th>
</tr>
<tr>
<td class="demo2">
<p class="p2">敷金0円</p>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th>DEMO3</th>
</tr>
<tr>
<td class="demo3">
<p class="p3">本日開店</p>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th>DEMO4</th>
</tr>
<tr>
<td class="demo4">
NEW
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th>DEMO5</th>
</tr>
<tr>
<td class="demo5">
❤️
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th>DEMO6</th>
</tr>
<tr>
<td class="demo6">
CSS銀行
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th>DEMO7</th>
</tr>
<tr>
<td class="demo7">
<p class="p7">お申し込みは今すぐ!</p>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th>DEMO8</th>
</tr>
<tr>
<td class="demo8">
<p class="p8">コンピュータ学園</p>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th>DEMO9</th>
</tr>
<tr>
<td class="demo9">
<p class="p9">レストラン</p>
</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th>DEMO10</th>
</tr>
<tr>
<td class="demo10">
1980円
</td>
</tr>
</table>
</li>
</ul>
</body>
</html>
デモにあるように10個のアニメーションをテーブルの中に入れたため、コードが冗長になってしまっていますが、CSSアニメーションに関わるところは少しです。
上にあるstyleの指定と、その「demo+番号」のところを見てください。
DEMO1: 透明度を変化させて出現
透明度opacityを0(これは誤解しやすいですが、完全に透明ということです。「不透明度」といっても良いかもしれませんね（笑）)から、1に変更させることで文字を出現させています。
これに色々組み合わせるとオリジナルなアニメーションが出来上がるでしょう。
ここでは、変化がわかりやすいように要する時間を5秒としました。他のアニメーションはほぼ全て2秒にしましたので、同期して動いています。
DEMO2: 上から下へ透明度を上げつつ出現
先ほどの透明度と、移動を組み合わせてみました。
移動は通常、margin-topなどの指定で良いと思いますが、ここは、テーブル内のセルに書かせているので、padding-topでしかもマイナスの値というちょっとややこしいことになってしまいました。ですが、基本は同じです。
ここにあるように、複数のプロパティ指定で、透明度と位置の両方を同時に変化させることができるようになります。
DEMO3: 拡大しながら回転
今度も組み合わせです。
ここでは動きが操作しやすいように、文字をpタグ内に書き分けました。
回転は「transform: rotate(60deg)」というような書き方をします。
拡大・縮小は、transformを使ってもできますが、ここでは単純にフォントサイズの変更をしています。
DEMO4: 文字色の変化
0%、100%以外に、「50%」のように途中の過程を指定することもできます。
ここでは、色を黄色からオレンジ色、ついで赤色に変化させています。
DEMO5: 拡大・縮小
先ほどは、フォントサイズの変更により拡大しましたが、transform: scale(1.3, 1.5)のように横幅と縦幅をそれぞれ別々に指定することも可能です。
DEMO6: 文字に影をつける
これはtext-shadowですので、モダンブラウザのみの対応になりますが、文字に影をつける変化をつけさせることもできます。
CSSアニメーションは、このような複雑なプロパティ値の変化にも対応してくれるところが強みではないでしょうか。
DEMO7: 左右の方向に移動
margin-leftを変化させることで、文字を移動させています。
イージングの初期値は「ease」で滑らかですが、ここでは等速度で移動するように「linear」を指定しています。
また、止まるべきところを少し追い越して後から戻ってくるようにするため、70%のところでマイナスの値を指定しています。
72%でゼロの本来の位置に戻ります。
そして、72%から100%の間、そこにじっと止まることなります。
なお、CSSのスタイル指定では、本論と直接関係ありませんが、テーブルセル内に書いている関係もあり、white-space: nowrap; overflow: hidden;の二つを指定して、文字の折り返しを防ぐとともに、はみ出た文字が表示されないよう処置をしています。
DEMO8: Y軸の周りの回転
DEMO3は平面上の普通の回転ですが、ここでは、立体的にY軸(縦方向)の周りの回転を行なっています。
親要素に、perspectiveを指定すれば奥行きを出すことができるようになります。
DEMO9: X軸の周りの回転
今度は、X軸方向の回転です。
ただし、ここでは、文字が起き上がってくるように見えるように、transform-origin: bottom;を指定して、文字の底を軸として回るようにしています。
DEMO10: 傾斜の変更
文字の傾きを変化させています。
30度から-30度まで周期的に変化します。
ここに0度を入れたりすると、動きがぎこちなくなるので、折り返し時点のところを0%と100%のところに指定する良いでしょう。
まとめ
CSSアニメーションは、それほどかしこまっていろんなプロパティを指定しなくとも、最低限3つほどと、プロパティを何から何に変化させるかを指定すれば、比較的簡単にできてしまいます。
WEB画面に少しでも動きがついていると、生きた画面という感じがして良いのではないでしょうか。
ここでは、極々基本的なテキスト関連のアニメーションだけを掲載しました。
他に、ボックス関係もあるでしょうし、それらの組み合わせもあるでしょう。
こまブログでは、いずれ、徐々に高度な物も載せていきたいと思います。
なお、CSSのアニメーションとしては、ホーバー時のエフェクトなどを行う、transitionもあります。
カーソルのホーバーという一種のイベントに対して発火するという点で、イベントとはあまり関係することのないanimationと比べ、そこはtransitionの方が有利でしょう。
また、JQueryでも比較的手軽にアニメーションを行うことができます。JavaScriptですから、クリックイベント時などに作動させることができます。
プロパティ値が数値以外の場合は、特殊な技法が必要ですが、アニメーションを本格的に行うなら、こちらも重要でしょう。
ではまた、お目にかかりましょう!