ホームページ >ウェブフロントエンド >htmlチュートリアル >Animate.css 純粋な CSS アニメーション ライブラリ_html/css_WEB-ITnose
Animate.css 純粋な CSS アニメーション ライブラリ_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:29:501587ブラウズ
github のアドレスは次のとおりです: https://daneden.github.io/animate.css/
水を追加するだけの CSS アニメーション
animate.css はクールで楽しい機能がたくさんあります、プロジェクトで使用するためのクロスブラウザー アニメーション。強調表示、ホームページ、スライダー、および一般的な水の追加に最適です。
CSS ファイルを <head> <link rel="stylesheet" href="animate.min.css"></head>
-
アニメーション化する要素のクラスに、アニメーションを追加します。無限スタイルを追加して、アニメーションを無限にループさせることもできます
-
最後に、次のクラスを要素に追加します。さまざまなアニメーション効果を実現できます:
- バウンス
フラッシュ - パルス
ラバーバンド -
シェイク -
ヘッドシェイク -
スイング - タダ
- ウォブル
- ゼリー
- バウンスイン
- バウンスインダウン
- バウンスイン左
- バウンスインライト
- バウンスインアップ
- バウンスアウト
- バウンスアウトダウン
- バウンスアウト左
- バウンスアウト右
- バウンスアウトアップ
- フェードイン
- フェードインダウン
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- fadeOut
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
- flipInX
- flipInY
- flipOutX
- flipOutY
- lightSpeedIn
- lightSpeedOut
- rotateIn
- rotateInDownLeft
- 回転インダウン右
- 回転インアップ左
- 回転インアップ右
- 回転アウト
- 回転アウトダウン左
- 回転アウトダウン右
- 回転アウトアップ左
- 回転アウトアップ右
- ヒンジ
- ロールイン
- ロールアウト
- ズームイン
- ズームインダウン
- ズームイン左
- ズームイン右
- ズームインアップ
- ズームアウト
- ズームアウトダウン
- ズームアウト左
- ズームアウト右
- ズームアウトアップ
- スライドインダウン
- スライドイン左
- スライドイン右
- スライドインアップ
- スライドアウトダウン
- slideOutLeft
- slideOutRight
- slideOutUp
-
-
例: -
<h1 class="animated infinite bounce">Example</h1>
すべてのアニメーションを表示効果
-
アニメーション化する要素のクラスに、アニメーションを追加します。無限スタイルを追加して、アニメーションを無限にループさせることもできます
-
最後に、次のクラスを要素に追加します。さまざまなアニメーション効果を実現できます:
- バウンス
フラッシュ- パルス ラバーバンド
- シェイク
- ヘッドシェイク
- スイング
- タダ
- ウォブル
- ゼリー
- バウンスイン
- バウンスインダウン
- バウンスイン左
- バウンスインライト
- バウンスインアップ
- バウンスアウト
- バウンスアウトダウン
- バウンスアウト左
- バウンスアウト右
- バウンスアウトアップ
- フェードイン
- フェードインダウン
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- fadeOut
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
- flipInX
- flipInY
- flipOutX
- flipOutY
- lightSpeedIn
- lightSpeedOut
- rotateIn
- rotateInDownLeft
- 回転インダウン右
- 回転インアップ左
- 回転インアップ右
- 回転アウト
- 回転アウトダウン左
- 回転アウトダウン右
- 回転アウトアップ左
- 回転アウトアップ右
- ヒンジ
- ロールイン
- ロールアウト
- ズームイン
- ズームインダウン
- ズームイン左
- ズームイン右
- ズームインアップ
- ズームアウト
- ズームアウトダウン
- ズームアウト左
- ズームアウト右
- ズームアウトアップ
- スライドインダウン
- スライドイン左
- スライドイン右
- スライドインアップ
- スライドアウトダウン
- slideOutLeft
- slideOutRight
- slideOutUp
- 例:
<h1 class="animated infinite bounce">Example</h1>
すべてのアニメーションを表示効果
<head> <link rel="stylesheet" href="animate.min.css"></head>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。