パターンA:白い画面が挟まる
パターンB:挟まらない
枚数によって秒数指定がずれるので、枚数は可変ではありません!!!(重要
スライドにしたい画像を全て一定の枠内にposition: absolute;
で重ねて配置します。画像のサイズは同じにしておく。
共通でopacity:0とアニメーションを付与。
初期値でopacity0が必要なので、他アニメーションとの併用が難しい場合があります。
2枚目以降はanimation-delay
でアニメーション開始自体を遅らせる。
秒数が大事。
1枚に4秒かけて3枚なら 4*3 =12。これがアニメーションの全体の秒数。
キーフレームの%は枚数一枚分でアニメーションが完結するようにする。
3枚なら100/3で33%でアニメーション一つが終わるように、0~16%(だいたい中間)かけてフェードインして16%~33%かけてフェードアウトしていくように書く。
.slider {
// 枠
position: relative;
width: 300px;
height: 200px;
li {
position: absolute;
top: 0;
left: 0;
// ↓これ大事!
opacity: 0;
animation: fade 12s infinite;
// 2個目以降はdelayで開始を遅らせる。
&:nth-child(2) {
animation-delay: 4s;
}
&:nth-child(3) {
animation-delay: 8s;
}
}
}
@keyframes fade {
0% {
opacity: 0;
}
16% {
opacity: 1;
}
33% {
opacity: 0;
}
}
パターンBでは、1枚目がフェードアウトしながら2枚目がフェードインして欲しいので、1枚目のフェードアウトを2枚目のフェードイン終わるタイミング(33% + 16%)まで伸ばし、中間地点も変更。
@keyframes fadeB {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
49% {
opacity: 0;
}
}
- | Mac | Windows11 | SP | ||||||
---|---|---|---|---|---|---|---|---|---|
ブラウザ | Chrome | Firefox | Safari | Chrome | Firefox | Edge | IE | Safari on iOS | Chrome for Android |
対応 | ○ | ○ | ○ | ○ | △ | ○ |
メッセージ
トレセン学園