Stylie - 無料のCSSウェブアニメーションビルダー

CSS3の文法に苦労していて アニメーションを作成する簡単な方法 スタイリング 保存するのに最適なツールです.

これは多くの無料のうちの1つです コードジェネレータ 純粋なCSSのアニメーション効果に焦点を当てて。 StylieはGitHubでホストされ、Rekapiと呼ばれるキーフレームライブラリによって運営されています。.

レカピ図書館 JavaScriptを使用していますか, それは純粋なCSSに代わるものです。そしてありがたいことに、Stylie Webアプリは両方の方法をサポートしています。 純粋なCSSまたはJavaScriptでコードをエクスポートする.

デフォルトでは、最初のページは連続アニメーションデモを線形アニメーションでロードします。あなたはこれを編集することによってこれで遊ぶことができます デフォルトの設定 の中に モーションタブ またはを編集して キーフレームタブ.

キーフレームリストでは、 新しいキーフレームを追加する, 合計期間を編集する, そして アニメーションスタイルを変更する, X / Y軸に基づく動きを含む.

まず、これになります 非常に分かりにくい, 特にこれまでにキーフレームアニメーションを実行したことがない場合は特にそうです。ただし、このアプリケーションで遊ぶ回数が多いほど、意味があります。.

デフォルトでは、たくさんの さまざまな緩和オプション めちゃくちゃにして、それらはすべてカスタマイズがとても簡単です。.

の モーショングラフ 学ぶのはとても難しいですが、アニメーションのイージングをはるかに制御することができます。スタイリッシュにもできます カスタムモーションエフェクトを保存 そして これらを再利用する 他のアニメーションの[キーフレーム]タブ.

私は1つのことについて文句を言うことができればそれはWebアプリのです レスポンシブデザインの欠如.

ブラウザを完全に最大化しても、アプリ全体を13インチMacBook Proの画面に収めることができませんでした。ページには垂直スクロールバーがなく、多くのオプション（エクスポートされたコードなど）が見つかったため、問題になる可能性があります。設定ペインの下部.

しかし、このささいな煩わしさを除けば、私はそれが私のより大きなモニターでちょうどうまく動くようにしました。そしてその 輸出品質 あなたがウェブ上で見つけることができる他には何もない.

どのように動作するかを見るためにStylieアプリを覗いて、いくつかのオプションをいじってみてください。アニメーションを作成したら、次のことができます。 CSSまたはJavaScriptをエクスポートする そしてあなたが好きなプロジェクトにそれを使ってください.

インターフェースの学習に問題がある場合は、この短いチュートリアルを約9分に渡ってご覧になり、すべての主要機能を網羅することもできます。.