css animation-delay の使いどころ

cssのanimationでクロスフェイドをさせる際には、各要素で同じ@keyframesを使いつつ、nth-of-type(n)セレクタで、animation-delayをずらしてあげると、効率がいいです。
クロスフェイドさせたい要素は、最終的にはposition:absoluteで重ねた上で、opacityをアニメーションさせます。(クロスフェードする要素内にクリックさせたい要素がある場合は、z-indexも変化させる必要があります。)
はじめから重なっていると何が起きているのかわかりにくいので、

  1. 幅を変化させる
  2. opacityを変化させる
  3. position:absoluteで重ねる

という順序でサンプルを提示しておきます。なお、cssのベンダープレフィックスは省略しています。

幅を変化させる

段落1

段落2

段落3

opacityを変化させる

段落1

段落2

段落3

position:absoluteで重ねる

段落1

段落2

段落3

ちょっと分かり易くなったかな?

css animation-delay の使いどころ」への2件のフィードバック

  1. 真中のぶ真中のぶ

    white-space:nowrap;というのを初めてみました。なんでしょうか?

    それと、キーフレームの%の割り当てについて良く分からないので
    今日、立川で教えて下さい。

    他のサイトも見たのですが、?です。

    返信
  2. ピンバック: 2013-4-5勉強会 | パソコン倶楽部りんご

真中のぶ へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.