前言

前回のcss 3アニメーション(三)animationの概要では、animationのサブプロパティを簡単に紹介しただけで、本当の使用はありません.本編では、animate.を読むことでcssというcssのアニメーションライブラリは,css 3のanimation属性の理解を深める.

animate.css

animate.cssは非常に多くのアニメーション効果を持つcssアニメーションライブラリです.アニメーション効果のプレゼンテーション

使用法

Example

ベースクラスanimatedやアニメーションクラスflashを加えると、「点滅」するアニメーション効果があります.

アニメーション分類

プレゼンテーションを表示すると、このアニメーションライブラリのアニメーションタイプは14種類に分類されています.

Attention Seekers

Bouncing Entrances

Bouncing Exits

Fading Entrances

Fading Exits

Flippers

Lightspeed

Rotating Entrances

Rotating Exits

Sliding Entrances

Sliding Exits

Specials

Zooming Entrances

Zooming Exits

ここにいるcssのソースディレクトリも、その分類によって14のフォルダに分けられます.

_base.cssベースクラス

まず_を見てbase.cssのベースクラス:

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  animation-delay: 1s;
}

.animated.delay-2s {
  animation-delay: 2s;
}

.animated.delay-3s {
  animation-delay: 3s;
}

.animated.delay-4s {
  animation-delay: 4s;
}

.animated.delay-5s {
  animation-delay: 5s;
}

表示:.animateベースクラスでは、アニメーションの2つのサブプロパティ(animation-durationとanimation-fill-mode)が設定されています.その値はそれぞれ1 sとbothである.animation-fill-mode詳細
.animate.infiniteベースクラスは、アニメーションの再生回数を無制限に設定しています
.animated.delay-nsベースクラスでアニメーションの遅延が設定されています

例:flashアニメーションソース

次に、アニメーションの例のソースコードを見てみましょう:flash.css

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  animation-name: flash;
}

ここにいるよcssでは、まずflashというキーフレームのシーケンスを定義します.

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

0%、50%、100%のキーフレームでは、スタイルopacityは0で25%、75%のキーフレームで、スタイルopacityは1です.
それから、下にあります.Flashクラスでは、animation-nameプロパティの値としてflashを使用します.flashはキーの名前を定義します.
したがって、flashクラスを追加することで、要素に「点滅」のアニメーション効果を持たせることができます.

まとめ

上記の例のflashアニメーションソースコードの読み取りにより、css 3 animationプロパティの使用が深まりました.