「Animista」は様々なアニメーションを作成しCSSで出力できるサイトです。回転したり背景色を変えたり、バウンドさせたりさまざまなアニメーションが用意されています。それぞれの動きの微調整も可能で、その場で動作を確認できます。出来上がったアニメーションはCSSで出力され、コピペで利用できますよ。

以下に使ってみた様子を載せておきます。
 

まずAnimistaへアクセスしましょう。アニメーションの種類がたくさん用意されているので、お好みのものを選択しましょう。


170320_an2.jpg


左側に動きを微調整させるメニューが用意されているので値を変更してみましょう。中央に表示されているサンプルの動きがリアルタイムに変更されますよ。思い描くアニメーションが作成できたらCSSで出力。あとはコピペして利用するだけです。CSSでアニメーションを作成する際に重宝するサイトだと思います。ぜひご活用ください。


Animista

(カメきち)