Animistaを使ってクールなCSSアニメーションを簡単に作成する

がある オンラインのCSSアニメーションWebアプリケーションのトン. しかし、細部のレベルや使いやすさと比べると、ごくわずかです。 アニミスタ.

この無料のWebアプリはあなたをすることができます ボタンをクリックするだけでカスタムCSSアニメーションを生成. スライド、変形、揺れ、さらにはシャドウドロップアニメーションなど、デザイン済みのモーションから選択できます。.

アニメーションを作成したら、次のことができます。 コードをエクスポートする 他のCSSジェネレータと同じです。ただし、このコードの方がはるかに使いやすく、さらに 内蔵の小型化ツールが付属しています.

インターフェースは、最初は混乱を招くように感じるかもしれませんが、それはあなたが持っているオプションの数が多いからです!

あなたはカスタムアニメーションを作る 次の3つの主なステップ そしてインターフェースを使う 上から下まで：

このプロセスを通して、あなたはアニメーションの総持続時間、イージングスタイル、ディレイ、ほとんど全てを変えることができます。そしてそれはすべて 純粋なCSS 3を介して動作します, それはさらに印象的になります.

一番上のナビゲーションバーにも注目してください。 さまざまな種類のアニメーションターゲットスタイル.

の デフォルトは “基本的な” これはほとんど何でも動くことができます（ホバー、クリック、または即時アニメーション）。その他の目標 ページテキスト、背景アニメーション、さらにはカスタムエントランスアニメーション 非表示のページ要素を表示する.

私は特に好きです “注意” ボタンスタイルのためのいくつかのクールな揺れとジッタ効果を持っている一番上のリンク。これらはCTAボタンに大きく作用し、注意を引き、ユーザーの操作を促します。.

調整が終わったら、 小さな角かっこのアイコンをクリック プレビューペインの右上隅に.

これで新しいページが表示されます。 完全なCSSアニメーションクラスとキーフレーム. オプション機能により、 コードを縮小する そして 自動プレフィックスを含める これは古いWebブラウザをサポートしています.

私はたくさんのカスタムCSSアニメーションツールを使ってきましたが、間違いなくAnimistaはそこで最も機能豊富なツールです。それは最初は完全に無料で、少し複雑ですが、インターフェースを理解したら、それはあなたが使うことができるはるかに最高のジェネレータです。.

試してみるには、ホームページにアクセスしてクリックしてください。 “私を試してください”. 自分の考えや賛辞をWebアプリの作成者@ ana108と共有することもできます。.