コーディング /

CSS+jQueryでアニメーションを作成する際によく使用するTips集

CSSで簡単に作成できるアニメーション。数行のコードですぐに実装できるけど、ちょっとしたプロパティや記述方法を忘れてしまいがち…。そこで今回は、私がよく使うアニメーション関連のコードをまとめました。

各種animationプロパティ

基本の記述方法は覚えていても、使用頻度のあまり高くないプロパティや、ショートハンドの順番はうろ覚え、という方も多いのではないでしょうか?各種プロパティとその概要を以下にまとめました。

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

JS

うろ覚えなコードを検索しているちょっとした時間も、こういったtips集で短縮できれば工数削減につながります。ぜひ、ご活用ください。

この記事を書いた人

永渕百合子

PAGE TOP