ITエンジニア/デザイナ向けにオープンソースを毎日紹介

StylieはCSS3のキーフレームベースのアニメーションをグラフィカルに設定できるソフトウェアです。

CSSでアニメーションを実行できるのは知られていますが、その実装となるとかなり面倒な雰囲気があります。しかしStylieを使えばグラフィカルに簡単に設定が可能です。


デフォルトの表示です。左から右へボールが流れていきます。


単純に流れる以外の動きも指定できます。


こんな感じで曲線にすることも。始点と終点はドラッグで移動できます。


対応ブラウザを選択することでCSSの内容が変化します。

StylieはRekapiというアニメーションライブラリをベースにしています。そのための設定をグラフィカルに指定できるツールと言えそうです。ボールの画像も自由に指定できるので、色々試してみてください。

StylieはJavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。


MOONGIFTはこう見る

HTMLのオーサリングツールとして有名なDreamweaverもHTML5での各種機能については乗り遅れている感があります。静的な従来通りのWebサイトを作るのであれば十分ですが、インタラクティブなサイトを構築するのには向いていないように感じます。

そこに新しいチャンスがあるのではないでしょうか。HTML5のある機能を手軽に扱えるようにするオーサリングツールを組み合わせて一つのツールにすると人気が出るかも知れません。Dreamweaverを置き換えるのではなく、足りない機能を補完的に提供するのが良いでしょう。

Stylie. A graphical CSS animation tool.

jeremyckahn/stylie

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2