CSSアニメーションを簡単に実装する方法。難しいことを書かなくても一瞬でコードを生成してくれるサイト『Animista』

Web制作を普段からやっている人でも、なかなかanimationプロパティやキーフレームなどのCSSアニメションを使いこなしている人は少ないのではないでしょうか？

きれいなアニメーションにするためには、transition、duration、keyframe…など細かい調整が大変です。しかし、このサイトを使えば簡単にコードが生成できます。

Animistaのサイトにアクセス

以下のURLよりサイトにアクセスします。

フロントーページからきれいなアニメーションでお出迎えしてくれます。『TRY ME!』ボタンを押して先に進みましょう。

アニメーションを作ってみる

英語ですがサイトの構成はとても直感的でわかり易いです。ヘッダーメニュー（黒帯の部分）から、ベーシック、テキスト、背景画像などのアニメーションの分類を選択します。

その下のセクションではアニメーション種類を選択します。選択した瞬間にプレビューも表示されますので、気に入ったものを選んだらOPTIONの項目から更に細かい動きを設定していきます。

調整が終わったら、画面右端中央あたりに表示されている[Generate code]のボタンを押すとコードが生成されます。