Edited at

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

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/