CSSアニメーションの応用事例

http://css-tricks.com/css-animation-tricks/

1 comment | 1 point | by WazanovaNews 約3年前


Jshiike 約3年前 | ▲upvoteする | link

Zach SaucierがCSSアニメーションを駆使したテクニックを披露しています。

#1) Jump to another state mid-animation

CSS animationで、微妙に数値の違う二つのkeyframe(例えば、.001%)を利用して、propertyを新しい値に即ジャンプする方法。

CSSコード

@keyframes toggleOpacity {
  50% { opacity: 1; } /* Turn off /
  50.001% { opacity: 0.4; }
  / Keep off state for a short period /
  52.999% { opacity: 0.4; } / Turn back on */
  53% { opacity: 1; }
}

ビルボード照明広告を模したこのデモで効果を確認できます。

#2) Negative animation delays

positive animation delayは、animationが開始まで一定の時間待機すること。一方、negative animation delayを使うと、時間が既に過ぎた感じで、すぐに開始させることができ、タイミングを変更するだけで複数のelementでanimationを再利用することができる。こちらのデモのように、animationサイクルの異なったstateにおいて、円形のanimationがすぐに開始される事例で効果を確認できます。

#3) Proportional animations

レスポンシブデザインを実現するための方法。animationで、一定比率のwidth & heightを必要とする円と四角などのelementを描く際に、固定値を使うのでなく、パーセントで設定したwidth / ゼロ値のheight / パーセントで設定したpaddingの組み合わせで実現する。下記のコードのように、padding-bottomが、widthに対して一定比率を保つためのポイントである。

.container {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

こちらのデモのように、windowのサイズを変更するアニメーションで応用できます。またここでは、negative animation delayも使っています。

#4) Changing transform-origin mid-animation

transformation-originを使うと、四つの異なるanimationでなく、異なる軸を利用してローテーションする一つのanimationで、このようなデモが実現できる。注意点としては、animation-mode:forwards;を一部でしか使えないので、transformation-originの変更をする前に、そのstateと同じelementに再度ポジションをとらなくてはいけなくなる。先ほどのデモでは、ローテーションの効果を実現するためにtranslateを利用している。こちらのデモも参照されたし。

#5) Negative transform-origins

negative transform-originを使うと、円形の軌道をつくるのに便利。円軌道を動くanimationをつくるのに、一つのelementを使ってtranslate / rotationの値を指定するのでなく、二番目のelementもしくはpseudo-elementと、negative transform-priginを利用してもっとシンプルにできる。[デモ] transform-originの値を変えていけば、円軌道を維持しながら同じanimationを複数のelementに再利用することができます。

#6) Box shadow magic

box-shadow propertyは、elementのまわりに複数のborderを設定でき、工夫すれば、HTML elementを追加せずに新しいanimationできるelementをつくることができる。このデモのように、円軌道を描く6個の円に見えるが、実はoffset box-shadowを使った一つのelementというanimationができる。box-shadowはパーセント設定をサポートしてないので、ネイティブHTMLのように簡単にレスポンシブデザイン対応できないが、animationの際に手動で変更するか、HTML elementのtransform:scaleを使って実現できる。

#7) Using pseudo-elements

一つのelementにコンテンツを追加するのには、pseudo elementも利用できます。親であるbox-shadowと異なるanimationをすることができ、HTML markupを使わない子elementに似ています。この特性を利用すると、このデモのような単一のelementでの素晴らしい効果を発揮できます。中心のフラッシュしている円の周りにある大きな円と、端を回っている小さな円は、ともにメインのelementのbox-shadowです。残りの二つの小さな円はpseudo-elementのbox-shadowで、リングはpseudo-elementのバックッグランドのSVGです。


[2013] ワザノバTop100アクセスランキング


#css #デザイン

Back