cssのアニメーション

jQueryのfadeやらなにやら, アニメーションを表現するものの中には機種依存を起こす物がちらほら. そんななか, 「cssの animationを使えばなんとかなるよー」ということなのでやってみた.

cssでアニメーション

1. やりたいこと

いわゆるフェードイン/アウト. しかしjQueryの.fade系は機種依存起こすかも, だとか. なので cssの animationで, cssのプロパティの opacityを操作する. 

( ﾟдﾟ )

おわかりいただけただろうか…

2. アニメーション内容の宣言

いじるのは css. jsはあくまで addClassしてクラスを切り替えるだけ. この切り替えられたクラスに合わせて cssで表現してやると, 再利用性は格段にアップするはず.

用意するコードはいつもとはちょっと異なり, 「アニメーションの動作内容」の部分と「作ったアニメーションを使うことを宣言する」部分に分けられる. 要するにアニメーションメソッドを作って, それを呼び出す, みたいな流れ.

<div class="testface">
( ﾟдﾟ )
</div>

上の例の場合は, まずはフェードするアニメーションを作成する.

@-webkit-keyframes anime1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes anime1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

注意点としては, レンダリングエンジンごとに用意してやる必要があること. Chromeや Safariなら webkit. firefoxならmoz.
上が webkit用, 下は moz用の宣言. 中身を変えてしまうと当然動きも変わってしまうから注意. コピペ推奨.
1行目がレンダリングエンジンの設定と そのアニメーションの名前. 名前は自由に設定できるので, わかりやすい名前を付けてやろう.
2行目から4行目は, 開始の状態. この場合は 「opacity: 0;」透明度100%状態からスタート, となる.
そして5行目から7行目が終わりの状態.  「opacity: 1;」透明度0%状態となり, 完全に出現した状態となる.
この fromと toは, それぞれ 0%, 100%と書くこともでき, また 33%等, 途中の状態も設定できる.
これでアニメーションの内容は宣言できた. 割と簡単.

3. アニメーションの実行を宣言

アニメーションを作ったら, それを付与してやる. この時いろいろプロパティがあり, これがまたいろいろ悩ませてくれる. 

.testface{
    color: red;
    -webkit-animation: anime1 2s linear infinite alternate;
    -moz-animation: anime1 2s linear infinite alternate;    
}

color: red;はキニシナイ. webkit, moz用に2つ設定. 内容は同じ.
最初の anime1は 2.で設定したアニメーションの名前.  ここでどのアニメーションを使うか宣言する.
2s は「2秒」. アニメーション1周期を何秒で描画するか, を設定する.
linearはアニメーション方法の指定, この場合は fromから toまで一定の速度で変化する方法. 他にもいろいろ.
infiniteは描画回数. 単に 6など数字を入れればその回数描画してくれる. この場合は無限回の指定.
alternateはアニメーション方向. 要するに fromから toへアニメーションするか, その逆に toから fromへアニメーションするか, といった設定. alternateは「奇数回目は from→ to, 偶数回目は to→from」という特別な設定. 例にあるとおり, from→ to→ from→ toと, アニメーションの設定を行き来してくれる.
他にも, アニメーションの開始を遅らせるプロパティなども. これらをセットしたら準備OK.


ちなみに opacityをいじっていたところを marginをいじるように変更すれば, こんなものもcssだけでできる.↓

ガクガク (((( ﾟдﾟ ；)))) ブルブル

参考