SaucierがCSSアニメーションを駆使したテクニックを披露しています。animationで、微妙に数値の違う二つのkeyframe(例えば、.001%)を利用して、propertyを新しい値に即ジャンプする方法。}}ビルボード照明広告を模したこのデモで効果を確認できます。delayは、animationが開始まで一定の時間待機すること。delayを使うと、時間が既に過ぎた感じで、すぐに開始させることができ、タイミングを変更するだけで複数のelementでanimationを再利用することができる。こちらのデモのように、animationサイクルの異なったstateにおいて、円形のanimationがすぐに開始される事例で効果を確認できます。animationsレスポンシブデザインを実現するための方法。パーセントで設定したpaddingの組み合わせで実現する。下記のコードのように、padding-bottomが、widthに対して一定比率を保つためのポイントである。100%;}こちらのデモのように、windowのサイズを変更するアニメーションで応用できます。delayも使っています。mid-animationtransformation-originを使うと、四つの異なるanimationでなく、異なる軸を利用してローテーションする一つのanimationで、このようなデモが実現できる。注意点としては、animation-mode:forwards;を一部でしか使えないので、transformation-originの変更をする前に、そのstateと同じelementに再度ポジションをとらなくてはいけなくなる。先ほどのデモでは、ローテーションの効果を実現するためにtranslateを利用している。こちらのデモも参照されたし。transform-originを使うと、円形の軌道をつくるのに便利。transform-priginを利用してもっとシンプルにできる。transform-originの値を変えていけば、円軌道を維持しながら同じanimationを複数のelementに再利用することができます。elementを追加せずに新しいanimationできるelementをつくることができる。box-shadowを使った一つのelementというanimationができる。elementのtransform:scaleを使って実現できる。elementも利用できます。markupを使わない子elementに似ています。この特性を利用すると、このデモのような単一のelementでの素晴らしい効果を発揮できます。中心のフラッシュしている円の周りにある大きな円と、端を回っている小さな円は、ともにメインのelementのbox-shadowです。残りの二つの小さな円はpseudo-elementのbox-shadowで、リングはpseudo-elementのバックッグランドのSVGです。