邪悪なCSS - ピュアCSS3のホットな新しいアニメーションライブラリ
CSS3のおかげであなたはWeb上でいくつかのクレイジーなアニメーションを作ることができます。これらはできます すべてのブラウザとページ要素にわたって機能します。 ナビゲーション項目、ドロップダウン、タブを制御するには、名前を付けます。.
実際、アニメーションツールを使ってこれらのコードを動的に生成することさえできます。しかし、それらは本格的なアニメーションライブラリと比べるとかなり限られています。.
邪悪なCSSはその種の最新のライブラリです。これは私に初期のことを思い出させる かなりシンプルで初歩的なAnimate.css, それでも、ほとんどすべてのWebサイトで使用できます.
サポートされているすべてのアニメーションのリストと一緒にライブデモのホームページを覗いてみてください。この記事を書いている時点で私は数えます スライドから回転までの合計24のアニメーションスタイル とパルス/バウンス効果.
![](http://savtec.org/img/images/wicked-css-a-hot-new-animation-library-in-pure-css3.jpg)
これらのアニメーションの多くは、要素を表示(または表示外)にするための一時的な機能です。これは、特定のページ要素をターゲットにしたスクロールビューアニメーションのページに便利です。.
でもできます 追加のページアイテムを表示(または非表示)するためにこれを使用します ドロップダウンメニュー、検索バー、表示されていない申し込みフォームなどがあります。これがあなたが選ぶことができるアニメーションの小さなリストです:
- 振る
- ズームイン/ズームアウト
- 上下にスライド
- フェードイン/アウト
- ロールイン/ロールアウト
- バウンスとポップ
- 円回転イン/アウト
これらのアニメーションスタイルはすべて1回の使用に合わせて設計されています。それらはページごとにそして要素ごとに複数回呼ばれることができます、しかし これらは繰り返しのアニメーションではありません.
代わりに、ユーザーのクリック、ホバー、またはスワイプ効果に基づいてこれらを使用します。それらはまた脈動/ズキズキする効果のためにCTAボタンで使用することができます、しかしそれはJavaScriptタイミング機能を必要としません.
![](http://savtec.org/img/images/wicked-css-a-hot-new-animation-library-in-pure-css3_2.jpg)
ライブプレビューといくつかの詳細については例のページを見てください。メインサイトにはGitHubリポジトリと一緒に完全なドキュメントもあります。.
Wicked CSSは新しいライブラリなので、まだ大したことはありません。しかし、ライブラリは安定しており、今後何年もの間使用される可能性があります。.