2017年09月24日(日)
直感的な操作で簡単にアニメーションを作成することができるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」
WEBサイトならではのアクション要素の一つ、アニメーション。取り入れることができれば個性的でインパクトのあるサイトを制作できますが、アニメーションの作成はハードルが高いと感じる方も多いのではないでしょうか。そんな方におすすめできるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」を今回はご紹介します。
使い方が難しそうと思われる方も多いかもしれませんが、汎用性の高い便利なツールとなっています。使用方法をわかりやすく説明してくれている動画が紹介されていますので、まずは下記よりご覧ください。
詳しくは以下
使い方は直感的で、ドラッグで図形や黄緑色の＋印を動かすことでアニメーションの距離、角度などを調整することが可能。＋の数を増やすことで動きの折り返し地点を作成していき、拡大することで遠近感を出すことができます。さらに四角の図形を回すことで回転方向を決定。英語表記ですが、動画を見ながら操作ができるくらい簡単な仕様となっているのは非常に嬉しいポイント。自分の好きな形にアニメーションを作成できたら、CSSも同時に生成されているのでコピーして貼付ければ完成です。
驚くくらい簡単に作成を行うことができるアニメーションツール「S...
0
0
0
53author:
Design Develop
デザインを開発するという視点からWEBデザインに役立つ情報を発信しているクリエイティブBLOG
‹ PREV
[ユーザー投稿] 仮装通貨だけではないブロックチェーン技術の可能性をオンラインメディアの記事から
NEXT ›
グラフや図など、データ可視化の表現パターンをギャラリー化して紹介する・「Data Viz Project」
Ads
デザインを開発するという視点からWEBデザインに役立つ情報を発信しているクリエイティブBLOGDesign Developの記事『直感的な操作で簡単にアニメーションを作成することができるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」』についてまとめています。
この記事は特にアニメーション・youtube・動について書かれており、 Webデザイン、HTML+CSSコーディング、Webサービスのカテゴリーに分類されます。気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のDesign Developで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとDesign Developの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
Ads
