プレビューを確認しながら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 で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。