Fiddle here with the CSS and HTML shown below: https://jsfiddle.net/xg0Lsa6f/
Код: Выделить всё
.fader5 {
position: relative !important;
background: black;
}
.fader5 img {
position: absolute !important;
left: 0;
top: 0;
-webkit-animation: fader5fade 10s infinite;
animation: fader5fade 10s infinite;
}
@keyframes fader5fade {
0% {
opacity: 1;
}
10% {
opacity: 1;
}
20% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fader5 img:nth-of-type(5) {
animation-delay: 0s;
}
.fader5 img:nth-of-type(4) {
animation-delay: 2s;
}
.fader5 img:nth-of-type(3) {
animation-delay: 4s;
}
.fader5 img:nth-of-type(2) {
animation-delay: 6s;
}
.fader5 img:nth-of-type(1) {
animation-delay: 8s;
position: relative !important;
}< /code>
[img]https://live.staticflickr.com/65535/54578463678_c27eb53860_n.jpg[/img]
[img]https://live.staticflickr.com/65535/54578567065_025ae037e7_n.jpg[/img]
[img]https://live.staticflickr.com/65535/54578417269_740e2f5846_n.jpg[/img]
[img]https://live.staticflickr.com/65535/54578463698_eccddf3374_n.jpg[/img]
[img]https://live.staticflickr.com/65535/54577373532_f92b4ab806_n.jpg[/img]
The first time through the images seem to transition smoothly from one to the next; subsequent times through, they seeme to "fade through black." How do I make them transition smoothly, "stacking" on each other, rather than fading through black/the background color?
Подробнее здесь: https://stackoverflow.com/questions/796 ... t-keyframe
Мобильная версия