R4

Webサービス レビュー * R4  

CSS3アニメーションのコードを生成できるWebサイト「Stylie」

2012年9月24日 Tag:webサイト制作 Text by 上瀧

このエントリーをはてなブックマークに追加

CSS3アニメののanimationプロパティのコードを直感的に生成できるWebサイト「Stylie」のご紹介です。

「Stylie」にアクセスすると早速アニメーションが開始されてます。
これを元に、作りたいアニメの軌道を調整していきます。

画面右の黒いパネルから設定していきます。
「Tween」タブでは、X軸・Y軸のイージングの種類や、アニメーションの再生時間を入力します。
また、イージングで「CustomEase」を選択すると、その下の数値を変更することで自分好みのイージングが設定可能です。

「Keyframes」タブでは、開始時・終了時のオブジェクトの位置を設定します。
こちらはプレビューで表示されているパスの始終点をドラッグしても変更できます。

最後に「CSS」タブを見てみると、プレビューで流れているCSSが書かれています。

現在のブラウザのサポート状況ですと使える状況が限られてしまいますが、CSSアニメーションになかなか手を付けられずにいる方は、簡単に試せるので覗いてみてはいかがでしょうか。

Webサイト:Stylie

Latest

Pickup

Category

koyomi

4db

Twitter