こんにちは。FASTCODINGデザイナーの七転び八重子です。
アニメーションをシリーズでまとめて見よう！第二回は、「CSSアニメーションの基本・作り方まとめ」です。CSSアニメーションで実際に、利用場面が多いボタンエフェクトや要素をスライドインさせる動きを作ってみようと思います。
アニメーション特集１「アニメーションはCSSとJSのどちらを使うべきなのか？」はこちら。
目次
CSSでアニメーションを作る方法は2つ
CSSのみでアニメーションを作る方法は、【 transition 】と【 animation 】の2つです。
transition
単純な動きのアニメーションに利用する
・ループできない
・自動再生ができない（hover等のきっかけが必要）
・再生後にプロパティが元に戻る
animation
複雑な動きのアニメーションに利用する
・ループできる
・自動再生ができる
・再生後にプロパティの継続ができる
・細かな指定ができる
簡単に実装できる transition
ボタンのホバーなどに使用する場合は、transitionを利用します。
利用できるプロパティ
transition-property ： 対象のプロパティ
transition-duration ： かかる時間
transition-timing-function ： 速度
transition-delay ： 何秒後に開始するか
CSSテンプレート
/* １行ずつ書いた場合 */
.セレクタ {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 0s;
}
/* まとめて書いた場合 */
.セレクタ { transition: width 2s linear 0s;}
/* 複数をまとめて書いた場合 */
.セレクタ { transition: width,background-color 3s,2s ease,linear 0s,0s;}
ベンダープレフィックス（-webkit-、-moz-）も忘れず記述しましょう。
細かく設定できる animation
animationの場合は、transitionよりもフローが多く、keyflameで動きの内容を決めて、animationで動作させます。
keyflameで動きを決める
どんな動きにするのかをkeyflameで指定します。
@keyflame 動きの名前(任意){
0％ {その時点での見栄え}
50％ {background-color: #red;} /* 例えば背景のカラーをレッドからブルーに変更 */
100％ {background: blue;}
}
動きの名前は、任意です。このkeyflame自体の名前で、animationで動作をさせる時に使います。
進行度(%)は、そのアニメーションの進行を％で表示します。0%は始まっていない状態、100%で完了した状態になります。複数指定することができ、10%、20%と刻んでいけば、かなり細かい設定が可能です。
利用できるプロパティ
animation-name ： キーフレームの名前
animation-duration ： かかる時間
animation-timing-function ： 速度
animation-delay ： 何秒後に開始するか
animation-iteration-count ： 回数・ループ指定
animation-direction ： 再生する方向
animation-fill-mode ： アニメーション前後のプロパティの状態
animation-play-state ： 一時停止・再生の指定
@keyframes ： アニメーションの変化の指定
CSSテンプレート
/* １つずつ書いた場合 */
.セレクタ {
animation-name: sample1;
animation-duration: 1s;
animation-delay: 0.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction:alternate;
}
/* まとめて書いた場合 */
.セレクタ {animation: sample1 1s 0.5s ease-in-out infinite alternate;}
/* 複数をまとめて書いた場合 */
.セレクタ {animation: sample1 1s 0.5s ease-in-out infinite alternate , sampl2 1s 1.5s ease-in-out infinite;}
@keyframes sample1 {
0% { }
100% { }
}
transitionでクリック時にボタンに動きを付ける
ホバーでアニメーションが１回再生されます。
animationでボタンに動きを付ける
自動再生でループ、または１回再生などが設定できます。
animationで要素をふわっと下からスライドインさせる
ファーストビューの要素をスライドインアニメーションさせています。
Webサイトでよく見られる手法ですね。
※もう一度、見たい場合は、右下の「Rerun」をクリックして下さい。
まとめ
CSSアニメーション、簡単に実装できましたね。ここに、再生や逆再生などの細かな動きを付ける場合や複雑なアニメーションの場合は、JavaScriptアニメーションを利用します。
アニメーション利用する上で、よくコピペで実装など気軽に利用できるモノもありますが、Webサイトのパフォーマンスが落ちないように気をつける必要があります。ファストコーディングは、アニメーション制作を専門に行うチームが、全ての環境で高いパフォーマンスを維持したアニメーション制作を提供しています。お困りの際は、ぜひご相談下さい。
