cssのanimationでクロスフェイドをさせる際には、各要素で同じ@keyframesを使いつつ、nth-of-type(n)セレクタで、animation-delayをずらしてあげると、効率がいいです。
クロスフェイドさせたい要素は、最終的にはposition:absoluteで重ねた上で、opacityをアニメーションさせます。（クロスフェードする要素内にクリックさせたい要素がある場合は、z-indexも変化させる必要があります。）
はじめから重なっていると何が起きているのかわかりにくいので、
- 幅を変化させる
- opacityを変化させる
- position:absoluteで重ねる
という順序でサンプルを提示しておきます。なお、cssのベンダープレフィックスは省略しています。
幅を変化させる
|
1 2 3 4 5 |
<div class="slides"> <p>段落1</p> <p>段落2</p> <p>段落3</p> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.slides p { width:0; white-space:nowrap; overflow:hidden; animation:wider 9s ease infinite; } .slides p:nth-of-type(1) { background-image:linear-gradient(to right,#fc0,#f33); animation-delay:0; } .slides p:nth-of-type(2) { background-image:linear-gradient(to right,#ccf,#33f); animation-delay:3s; } .slides p:nth-of-type(3) { background-image:linear-gradient(to right,#cfc,#3f3); animation-delay:6s; } @keyframes wider { 0% {width:0;} 5%,30% {width:100%;} 45%,100% {width:0;} } |
opacityを変化させる
|
1 2 3 4 5 |
<div class="slides crossfade"> <p>段落1</p> <p>段落2</p> <p>段落3</p> </div> |
|
1 2 3 4 5 6 7 8 9 10 |
.crossfade p { width:100%; opacity:0; animation:crossfade 9s ease infinite; } @keyframes crossfade { 0% {opacity:0;} 5%,30% {opacity:1;} 45%,100% {opacity:0;} } |
position:absoluteで重ねる
|
1 2 3 4 5 |
<div class="slides crossfade abs"> <p>段落1</p> <p>段落2</p> <p>段落3</p> </div> |
|
1 2 3 4 5 6 7 8 |
.abs { position:relative; } .abs p { position:absolute; top:0; left:0; } |
ちょっと分かり易くなったかな？
white-space:nowrap;というのを初めてみました。なんでしょうか？
それと、キーフレームの％の割り当てについて良く分からないので
今日、立川で教えて下さい。
他のサイトも見たのですが、？です。
ピンバック: 2013-4-5勉強会 | パソコン倶楽部りんご