Help us understand the problem. What is going on with this article?

動きを合成できるCSS アニメーションライブラリ(15KB)

More than 1 year has passed since last update.

ex_logo-black.png

複数のアニメーションを掛け合わせて動きを合成できるCSSアニメーションライブラリを作りました。

基本となる10種のアニメーション(キー)と、方向性を決定するキーオプション、アニメーション全体の速度やイージングなどを調整する8種のモディファイアから構成されています。動きの強弱をコントロールするlevelモディファイアや、子要素全体へ一括して適用させるchildモディファイアなどの機能も備えています。

  • 複数のアニメーションを合成できる
  • 速度、強弱、イージング、ディレイ、リピート等の調整が可能
  • 子要素への一括適用機能
  • 15KB (Minify)

ダウンロード

ex_logo_large.png
リファレンスページはアニメーションのプレビュー機能も備えていますので、アニメーション名を調べる手間なく希望の動きを実験的に作ることができます。完成したアニメーションは[PLAY]ボタンでの再生と同時にURLパラメータに反映されるので、ブックマークして保存したり、他人と共有することもできます。例:ゼリー

基本記法と合成

合成によって作られるアニメーションは多様です。ここでは記法ルールと単純な合成パターンを紹介します。

以下はslideを表す@slキーとx方向への動きを指定するキーオプションの例です。
sl-x.gif

↓ @sl-y (スライドY軸)を同時に付与すると、以下の動きになります。
ezgif-1-0c8023e07965.gif
↓ @fd (フェードイン)を追加
sl-x_sl-y_fd.gif
↓ @rt-z (ローテートZ軸)を追加
sl-x_sl-y_fd_rt-z.gif
↓ キーの末尾に「!」マークで動きの方向性を反転できます。
sl-x!.gif
↓ @bn(バウンド)と@bn!(反転バウンド)
bn_bn!.gif
ほとんど全てのアニメーションキーに「!」オプションがあります。これは移動や回転、バウンドの運動(小さく→大きく から 大きく→小さく)にするなど、運動の方向を反転するオプションです。(逆再生とは違います)

↓ _origin は、変形の基点を変更するモディファイアです。8方向あり、下のサンプルでは基点をbottomにしたバウンドのアニメーションです。
bn_origin-b.gif
↓ _lv は、アニメーションの強弱を調整するモディファイアです。強く3段階、弱く3段階用意しています。
下のサンプルでは、@fl-y(フリックY軸)に強さ3を適用しています。
fl-y_lv.gif
↓ _ascend はアニメーションを子要素に時差をつけて適用するモディファイアです。
sl-x_ascend.gif
↓ @pr(パース)は、少し特殊なアニメーションキーです。Perspectiveをコントロールするだけでなく、Z軸の移動をアニメーションに掛け合わせます。
sl-x_ascend_pr-in.gif

以下はよく見かける動きをA.cssの合成によって作った例になります。興味がありましたら少しいじって遊んでみてください。

アニメーションキー

キー名 意味 説明
@fd Fade 透明度
@sl Slide 移動
@rt Rotate 回転
@sc Scale 拡大縮小
@fl Flick 弾かれた動き
@bn Bounce 弾み
@sh Shake  揺れ
@sp Spiral
@vb Vibrate 震え
@pr Perspective 奥行き

各アニメーションキーにはキーオプションが多数用意されています。詳しくはA.css - リファレンスページを参照してください。

モディファイア

モディファイアはアニメーション全体に有効になります。複数のアニメーションキーが設定されていた場合も、モディファイアは合成されたアニメーションに対して適用されます。

  • Easing (イージングの変更)
    • _ease
    • _ease-back
    • _ease-in-back
    • _ease-out-back
    • _ease-expo
    • _ease-in-expo
    • _ease-out-expo
    • _ease-circ
    • _ease-in-circ
    • _ease-out-circ
    • _ease-in-out
    • _ease-in
    • _ease-out
    • _ease-linear
  • Repeat (繰り返し回数)
    • _repeat (Infinite)
    • _repeat-2
    • _repeat-3
  • Speed (速度 - Duration)
    • _speed-up
    • _speed-up+
    • _speed-up++
    • _speed-up+++
    • _speed-down
    • _speed-down+
    • _speed-down++
    • _speed-down+++
  • Level (強度 調整できないアニメーションもあります)
    • _lv-up
    • _lv-up+
    • _lv-up++
    • _lv-up+++
    • _lv-down
    • _lv-down+
    • _lv-down++
    • _lv-down+++
  • Transform Origin (変形の基点 ScaleとRotateに有効)
    • _origin-t
    • _origin-rt
    • _origin-r
    • _origin-rb
    • _origin-b
    • _origin-lb
    • _origin-l
    • _origin-lt
  • Direction (再生の方向)
    • _alt
    • _alt-reverse
    • _reverse
  • Delay (ディレイ、 0.1s刻み)
    • _delay-1
    • _delay-2
    • _delay-3
    • _delay-4
    • _delay-5
    • _delay-6
  • Children (classを指定した子要素群にアニメーションが有効になります)
    • _child-ascend
    • _child-descend
    • _child-odd
    • _child-even
    • _child-each
    • _child-ascend-up
    • _child-ascend-up+
    • _child-ascend-up++
    • _child-ascend-up+++
    • _child-ascend-down
    • _child-ascend-down+
    • _child-ascend-down++
    • _child-ascend-down+++
    • _child-descend-up
    • _child-descend-up+
    • _child-descend-up++
    • _child-descend-up+++
    • _child-descend-down
    • _child-descend-down+
    • _child-descend-down++
    • _child-descend-down+++

設計

アニメーションの多様性と軽量化を両立させるために、CSS変数(カスタムプロパティ)を使用しています。

2つのキーフレーム

A.cssは、2つのキーフレームを各アニメーションキーが共有しています。キーフレームにはトランスフォームプロパティをはじめ、使用する全てのプロパティが記述されており、各アニメーションキーには変数のみ記述されています。
1.gif

アニメーションキー

基本的なスライドのアニメーションキーです。

_slide.css
[class*="@sl"] {
  --AN: steps2; /* 使用するキーフレーム */
  --AD: .5; /* スライドのDuration */
  --Avsl: calc(-100% * var(--AL)); /* 基本の移動量 x レベルモディファイア */
}

/* X */
[class*="@sl-x"] {
  --Avslx: calc(var(--Avsl) * var(--Arsx, 1));
  --ATX0: var(--Avslx);
  --ATX1: 0;
}

/* Invert */
[class*="@sl-x!"] {
  --Arsx: -1;
}

/* Y */
[class*="@sl-y"] {
  --Avsly: calc(var(--Avsl) * var(--Arsy, 1));
  --ATY0: var(--Avsly);
  --ATY1: 0;
}

/* Invert */
[class*="@sl-y!"] {
  --Arsy: -1;
}

/*-----------------------
    Out
-----------------------*/
/* X */
[class*="@sl-x-o"] {
  --ATX0: 0;
  --ATX1: var(--Avslx);
}

/* Invert */
[class*="@sl-x-out!"] {
  --Arsx: -1;
}

/* Y */
[class*="@sl-y-o"] {
  --ATY0: 0;
  --ATY1: var(--Avsly);
}

/* Invert */
[class*="@sl-y-out!"] {
  --Arsy: -1;
}

X軸のスライドの基礎部分は以下になります。

_slide.css
/* X */
[class*="@sl-x"] {
  --Avslx: calc(var(--Avsl) * var(--Arsx, 1));
  --ATX0: var(--Avslx);
  --ATX1: 0;
}

[class*="@sl-x"]は、属性セレクタによって、[class*="@sl"]ともマッチしてプロパティを受け継いでいます。[class*="@sl"]で計算された--Avslの値に反転用の変数--Arsxが掛けてあります。
--ATX0は「X軸最初」の位置になり、--ATX1はX「X軸最後」の位置です。
このように記述することで、反対方向への動きは以下の通り--Arsxを負の値にするだけで済みます。

_slide.css
/* Invert */
[class*="@sl-x!"] {
  --Arsx: -1;
}

これで、各組み合わせにより、8方向の移動のin(定位置にくる)と、8方向のout(定位置から逸れる)、inとoutの掛け合わせの8通りとで、合計24パターンのスライドアニメーションが作れます。

合成

@sl-x@sl-y@rt-zはすべて前に掲載した2stepsというキーフレームを共有しています。この3つのアニメーションキーが付与されると、2stepsのキーフレームは宣言された変数部分を計算し、トランスフォームは合成して再生されることになります。

アセット 2.png

おわりに

顔文字でCSSアニメーションさせる同様のライブラリもあります。

XD.css
https://w4u-public.github.io/XD.css/

w4u-public
kusa for you.
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした