アニメーションブロックのアニメーションのバリエーションが増えました!

Lightning Pro および Katawara に付属する VK Blocks Pro に入っているアニメーションブロックに「左右」「上下」「ぶるぶる(Y方向)」「ぶるぶる(X方向)」「どきどき」「ゆらゆら」を追加しました。VK Blocks Pro 0.41 〜 利用可能です。

それぞれ「アニメーションの速度」「アニメーションの距離」が設定できるので組み合わせで面白い表現が出来るのではないかなと思います。

フェードイン 早い

フェードイン 標準

フェードイン 遅い

スライドアップ 速い 短い

スライドアップ 標準 標準

スライドアップ 遅い 長い

スライドアップ 非常に遅い 長い

左右 速い 短い

左右 標準 標準

左右 遅い 長い

左右 非常に遅い 長い

上下 速い 短い

上下 標準 標準

上下 遅い 長い

上下 非常に遅い 長い

Trembring Y 短い

Trembring Y 標準

Trembring Y 長い

Trembring X 短い

Trembring X 標準

Trembring X 長い

どきどき 速い 短い

どきどき 標準 標準

どきどき 遅い 長い

どきどき 非常に遅い 長い

ゆらゆら 非常に速い 標準

ゆらゆら 速い 標準

ゆらゆら 標準 標準

ゆらゆら 遅い 標準

ゆらゆら 非常に遅い 標準

ゆらゆら 非常に遅い 短い

ゆらゆら 非常に遅い 標準

ゆらゆら 非常に遅い 長い

アニメーションブロックを入れ子にして複数の動きを設定してみたりもできるようです…(動作保証外)

ただ、残念ながら同じ領域内で複数のアイテムをアニメーションさせるのは難しいです。上記の例で言えば ラ○ュ○ と雲をそれぞれ違う動きにするのは難しいです。

雲をラ○ュ○の上や下のブロックとして配置すれば一応可能ではあります。
あるいは、重ねたい要素のブロックにHTMLアンカーなどをつけて、そのアンカーに対して CSS で position 指定して上または下にオフセットして重ねるという形ならできなくはないと思います。

VK Blocks Pro のユーザーの方はぜひお試しください。