プレビューを確認しながらCSSアニメーションが生成できる「Animista」

プレビューを確認しながらCSSアニメーションが生成できる「Animista」

プレビューを確認しながらCSSアニメーションが生成できる「Animista」

Animistaは、プレビューを見ながらCSSアニメーションを直感的に作成できるWEBサービスです。

Animistaの使い方

まずはAnimistaにアクセスして、[TRY ME!]をクリックします。

Animistaへのアクセス

画面上部からアニメーションの種類を選択します。

アニメーションの種類を選択

画面左下のOPTIONSで詳細な値を指定していきます。

オプションの指定

select object オブジェクトの選択
duration アニメーションする秒数
timing-function アニメーションのタイミング
use steps アニメーションのステップ数
delay アニメーション実行の遅延
iteration-count アニメーションする回数
direction アニメーションを再生する向き
fill-mode アニメーション実行前後のスタイル

値が指定できたら、プレビューの右上にあるコードのボタンをクリックします。

コード表示

CSSのコードが表示されるので、コピペして利用します。

表示されたコード

シンプルなものだと、以下のようなコードが出力されます。


.scale-up-center {
 -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 -moz-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

あとがき

値を変更する度にプレビューがアニメーションするので、挙動が非常にわかりやすいです。

要素にCSSアニメーションを追加したい時にぜひ!

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です