Animate.cssは数年前からあり、パーティーにかなり遅れることを認めざるを得ません。 数か月前にネットでいくつかのCSSアニメーションチュートリアルを検索して発見したのは、Animate.cssをアニメーション化するための最速で最も簡単な方法を見つけたことです。
Dan Edenという男が作成したAnimate.cssは、CCSがどのように動作するかを確認し、Webサイトでアニメーションアクションを取得するための高速な方法です。
「水だけでCSSアニメーションを追加する」と記述されているAnimate.cssは、真面目な面が少しあります。 私のようなアマチュアのWebデザイナーでさえ、CSSアニメーションの基本を素早く把握し、Webサイトにシンプルで効果的なエフェクトを作成できます。 アニメーション化された単一の見出しから、より複雑な動きまで、このツールはそれを実行できます。
Animate.css
Animate.cssはGitHubからダウンロードでき、基本的に1か所で収集された単純なCSSエフェクトのライブラリです。 各アニメーションはきれいにパッケージ化されており、すぐに使用できます。 必要なのは、好きなアニメーションを見つけてクラスを適用することだけです。 これで本当にすべてです。
2, 500行のコードが含まれているため、ライブラリ全体をダウンロードする必要はありません。 Animate.cssサイトにアクセスし、アニメーションを見つけて、[Animate.cssのダウンロード]リンクをクリックします。 クラスをWebページにロードして、コピーして適切に使用できるようにします。
ただし、GitHubを使用して、目的の効果を見つけるためにドリルダウンする方が簡単です。
- css GitHubページに移動します。
- 「ソース」リンクをクリックして、要素のリストにアクセスします。
- リストから探しているエフェクトタイプを選択します。 バウンスはアテンションシーカーなので、attention_seekersリンクを選択します。
- bounce.cssを選択します。
- コードをコピーしてページに配置し、アニメーションを適用します。
本当に簡単です。 異なる効果に対して異なるオプションを選択することは明らかですが、最終結果は同じです。 ページを手作業で持ち上げるのに必要なコードにアクセスします。
Animate.cssを使用したアニメーションオブジェクトの構築
Animate.cssでクールなものを作成するのは簡単です。 CCSコードを見つけて、独自のCSSに追加するだけです。 できれば誰でもできます！
Animate.cssページの最初のオプションはバウンスなので、この例ではそれを使用します。
- 「貼り付け」 '中 スタイルシートで。
- 目的のアニメーションのCSSを見つけて、アニメーション化する要素に追加します。 たとえば、「 'そのバウンス効果をテスト、画像などに追加します。
- 次のCSSコードを追加して、すべて機能するようにします。 上記のbounce.cssから取得。
@keyframesバウンス{
from、20％、53％、80％、{
アニメーションタイミング関数：キュービックベジエ（0.215、0.610、0.355、1.000）;
transform：translate3d（0, 0, 0）;
}
40％、43％{
アニメーションタイミング関数：キュービックベジェ（0.755、0.050、0.855、0.060）;
transform：translate3d（0、-30px、0）;
}
70％{
アニメーションタイミング関数：キュービックベジェ（0.755、0.050、0.855、0.060）;
transform：translate3d（0、-15px、0）;
}
90％{
transform：translate3d（0、-4px、0）;
}
}
.bounce {
アニメーション名：バウンス;
transform-origin：中央下;
}
Animate.cssでさらにアニメーションを作成する
上記のシーケンスは、ページが最初にロードされるときにバウンス効果を追加します。これはクールですが、一度限りのものです。 ホバーに追加するのはどうですか。 そうすることで、誰かがテストの上をホバーするたびにバウンスします。 実稼働Webサイトで行うことではありませんが、すべてがどのように機能するかを示すのに最適な方法です。
次のコードをCSSに追加して、ホバー時のバウンス効果を追加します。 マウスが要素の上をホバーするたびに、バウンドします。
.animated：hover {
-webkit-animation-duration：1s;
-moz-animation-duration：1s;
-ms-animation-duration：1s;
-o-アニメーション期間：1秒。
アニメーション期間：1秒。
-webkit-animation-fill-mode：両方;
-moz-animation-fill-mode：両方;
-ms-animation-fill-mode：両方;
-o-animation-fill-mode：両方;
アニメーション塗りつぶしモード：両方;
}
CSSを知っていれば、さまざまなアクションにさまざまな効果を実装する方法について、私よりもはるかによく知っているでしょう。 初心者として、これとAnimate.cssで提供されるライブラリは、Webページ用の基本的で効果的なアニメーションを作成するのに役立ちます。
ライブWebサイトでどれだけ使用するかはわかりませんが、それは必ずしもうまく機能しないためで、モバイルユーザーはあまり好きではないようです。 ただし、CSSがどのように機能し、CSSを使用してWebを強化する方法のレッスンとしては、CSSは素晴らしいリソースです。 私はまだ初心者ですが、このチュートリアルのためにAnimate.cssで数時間過ごすことで、多くのことを学びました。 終了する前にもっともっとプレイするつもりです。 あなたはどう？
