Go to Top

オリジナルCSSアニメーションをブラウザ上で作れるツール『animista』


アニメーションの細かな微調整もプレビューでスムーズ、あとはコピペで実装!

ご紹介する『animista』は、ブラウザ上で、向き・回転・色といった様々なアニメーションを自分の好きな設定で作れ、CSSコードの出力ができてしまうという、無料のWebサービスです。
「CSSアニメーションボタンを作りたい・・」「ありきたりのボタンだとイマイチ・・」 そんな風にお考えの方にはぴったりのツールだと思います。

 

『animista』にアクセスし「TRY ME!」ボタンから制作・プレビュー画面に入ります。

2001
最初は「BASIC」のアニメーションが表示されていますが、「ATTENTION」や「BACKGROUND」というように選択ができます。

2段目は「SCALE-UP」や「SCALE-DOWN」など、アニメーションのカテゴリです。
このカテゴリを選択するとテキストカテゴリが表示され、さらに色々な種類を選ぶことができます。それぞれプレビュー画面で確認できるのでとても使いやすくなっています。

3001
画面左にある「OPTIONS」は、アニメーション設定をオリジナル調整できます。

  • 〈 select object 〉 →  オブジェクト追加
  • 〈 duration 〉 →  再生時間
  • 〈 timing-function 〉 →  タイミング
  • 〈 use steps 〉 →  ステップ挿入
  • 〈 delay 〉 →  再生前スタンドバイ時間
  • 〈 iteration-count 〉 →  Repeat設定
  • 〈 direction 〉 →  CSSプロパティ
  • 〈 fill-mode 〉 →  CSSプロパティ

4001
設定後、プレビュー画面右上のボタンクリックによりCSSコードが表示され、「COPY TO CLIPBOAD」ボタンをクリックすればタグがコピーできます。

5001
細かな調整結果をプレビューを見ながらできるので、とても便利で効率的なツールです。

 

animista
http://animista.net/