ホームページ  >  記事  >  ウェブフロントエンド  >  Animate.css 純粋な CSS アニメーション ライブラリ_html/css_WEB-ITnose

Animate.css 純粋な CSS アニメーション ライブラリ_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:29:501551ブラウズ

github のアドレスは次のとおりです: https://daneden.github.io/animate.css/


Animate.css

水を追加するだけの CSS アニメーション

animate.css はクールで楽しい機能がたくさんあります、プロジェクトで使用するためのクロスブラウザー アニメーション。強調表示、ホームページ、スライダー、および一般的な水の追加に最適です。

CSS ファイルを
    <head>  <link rel="stylesheet" href="animate.min.css"></head>
  1. アニメーション化する要素のクラスに、アニメーションを追加します。無限スタイルを追加して、アニメーションを無限にループさせることもできます

  2. 最後に、次のクラスを要素に追加します。さまざまなアニメーション効果を実現できます:

  3. バウンス

    フラッシュ
    • パルス
    • ラバーバンド
    • シェイク
    • ヘッドシェイク
    • スイング
    • タダ
    • ウォブル
    • ゼリー
    • バウンスイン
    • バウンスインダウン
    • バウンスイン左
    • バウンスインライト
    • バウンスインアップ
    • バウンスアウト
    • バウンスアウトダウン
    • バウンスアウト左
    • バウンスアウト右
    • バウンスアウトアップ
    • フェードイン
    • フェードインダウン
    • 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>
  4. すべてのアニメーションを表示効果


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。