様々なCSSアニメーションを手軽に作れるサイト「Animista」

2017/04/12

こんにちは。
今回は様々なCSSアニメーションを手軽に作れるサイト「Animista」です。

ベーシックなものからテキスト関連、背景画像などのCSSアニメーションを簡単に作成できるジェネレーターを紹介します。

様々なCSSアニメーションを手軽に作れるサイト「Animista」

Animista

animista

http://animista.net/

 

Animistaの使い方

animista2

アニメーションのカテゴリーを選択します。
「BASIC」「ENTRANCES」「EXITS」「TEXT」「ATTENTION」「BACKGROUND」の6種類の中から選びますよ。
さらにその下の丸いカテゴリーを選択し、その下のアニメーション種類を選び、左のオプションを設定します。
右側で実際にどのような動きになるかプレビューしながら設定できますよ。
プレビュー画面の右上「Generate code」のボタンをクリックするとCSSコードが表示され、「COPY TO CLIPBOAD」のボタンをクリックするとコピーできます。

 

やってはいけないデザイン
やってはいけないデザイン

 

いかがでしたか。CSSアニメーションを作る際に活用してみてはどうでしょうか。
以上で様々なCSSアニメーションを手軽に作れるサイト「Animista」でした。

topへ戻る