CSSで簡単に作成できるアニメーション。数行のコードですぐに実装できるけど、ちょっとしたプロパティや記述方法を忘れてしまいがち…。そこで今回は、私がよく使うアニメーション関連のコードをまとめました。
各種animationプロパティ
基本の記述方法は覚えていても、使用頻度のあまり高くないプロパティや、ショートハンドの順番はうろ覚え、という方も多いのではないでしょうか?各種プロパティとその概要を以下にまとめました。
css
1 2 3 4 5 6 7 |
.sample { animation:animation-name(名前) animation-duration(1回にかかる秒数) animation-timing-function(キーフレームの種類) animation-delay(はじまるまでの秒数) animation-fill-mode(アニメーションが再生されていない時の状態) animation-iteration-count(繰り返す回数) animation-direction(交互に反転再生させるかどうか) } @keyframes animation-name(名前) { 0% {アニメーション開始時のcss} 100% {アニメーション終了時のcss} } |
プロパティのスタイル
数字以外で指定するプロパティは、「あのスタイルの名前、なんだっけ?」「どんなスタイルがあったっけ?」といちいち検索してしまうことも。スタイルの一覧と概要を以下にまとめました。
animation-timing-function(キーフレームの種類)
- linear:一定の速度で変化する。
- ease:最初と最後が滑らかに変化する。
- ease-in:徐々に早くなる。
- ease-out:徐々に遅くなる。
- ease-in-out:最初と最後が滑らかにゆっくり変化する。
- cubic-bezier(数値):上記以外のイージングを数値で指定することができます。こちらのサイトでそれぞれの数値が紹介されています。
animation-fill-mode(アニメーションが再生されていない時の状態)
- none:初期値。再生中以外は@keyframes内のcssは無効。
- forwards:再生中以外は100%の状態が適用される。
- backwards:再生中以外は0%の状態が適用される。
- both:再生開始前は0%の状態、再生終了後は100%の状態が適用される。
animation-direction(1回にかかる秒数)
- normal:初期値。0%から100%の再生で繰り返す。
- alternate:奇数回では0%から100%、偶数回では100%から0%でアニメーションを繰り返す。
transformプロパティの各種関数
要素を動かすアニメーションを作成する際に欠かせないのがtransformプロパティ。各種関数と概要を以下にまとめました。
- translate:移動距離
- scale:縮尺比率
- rotate:回転角度
- skew:傾斜角度
- matrix:変形
スクロールしたらアニメーションを再生させるjQuery
アニメーションを実装する際、よく使用されるのが「要素までスクロールするとアニメーションが再生される」という演出方法。以下は、スクロールするとanimationが指定されているclassが付与されるjQueryです。
css
1 2 3 4 5 6 7 |
.sample { animation:sampleAnime 1s alternate; } @keyframs sampleAnime { 0%{opacity:0} 100%{opacity:100} } |
JS
1 2 3 4 5 6 7 8 |
$(window).scroll(function(){ var windowHeight = $(window).height(), //ウィンドウの高さ topWindow = $(window).scrollTop(), // スクロールした値 targetPosition = $(“div”).offset().top; //要素の位置 if(topWindow > targetPosition - windowHeight + 100){ $(this).addClass(“sample”); } }); |
うろ覚えなコードを検索しているちょっとした時間も、こういったtips集で短縮できれば工数削減につながります。ぜひ、ご活用ください。