Opóźnienie animacji CSS i klatka kluczowa

Question

Mam problem z opóźnieniem animacji w animacji CSS. Mam 3 obrazy i chcę zrobić to pokazem slajdów. Na ilustracji: obraz 1 na obraz 2 zajmuje 15 sekund, a obraz 2 na obraz 3 zajmuje 15 sekund, a obraz 3 z powrotem na obraz 1 zajmuje 30 sekund, po pierwszej pętli, chcę, aby pokaz slajdów zakończył się na obraz 3 tak obraz 1 na zdjęcie 2 nieruchomo 15 sekund i obraz 2 na zdjęcie 3 jeszcze 15 sekund i gdy obraz 3 wczyta go nie ma potrzeby powrotu do obrazu 1. Próbowałem tego kodu, ale daje mi 15 sekund opóźnienia na wszystkie obrazy. To jest mój kod:

ul { 
 
     list-style: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     position: relative; 
 
    } 
 
    
 
    li { 
 
     position: absolute; 
 
     opacity:0; 
 
    } 
 
    
 
    li { 
 
     animation: xfade 45s infinite; 
 
    } 
 
    li:nth-child(2) { 
 
     animation-delay:15s; 
 
    } 
 
    li:nth-child(3) { 
 
     animation-delay:30s; 
 
    } 
 
    
 
    @keyframes xfade{ 
 
     3%{opacity:1} 
 
     33% {opacity:1;} 
 
     36%{opacity:0} 
 
    }

<ul> 
 
     <li><img width="500" height="500" src="http://lorempixel.com/500/500/sports" alt="pic1"></li> 
 
     <li><img width="500" height="500" src="http://lorempixel.com/500/500/people" alt="pic2"></li> 
 
     <li><img width="500" height="500" src="http://lorempixel.com/500/500/transport" alt="pic3"></li> 
 
    </ul>

Chcę, aby moja animacja opóźnienie w zależności ilustracje powyżej. Ktoś może mi pomóc rozwiązać ten problem? Dziękuję wcześniej.

Answer 1

myślę, że za pomocą GreenSock jest lepiej, jeśli chcesz animację z określonego scenariusza jak ten.

Oto najbliżej, jakie mogę uzyskać za pomocą HTML i CSS, muszę również zduplikować kod <li>, aby pasował do twojego scenariusza.

ul { 
 
     list-style: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     position: relative; 
 
    } 
 
    
 
    li { 
 
     position: absolute; 
 
     opacity: 0; 
 
    } 
 
    
 
    li:nth-child(6) { 
 
     /*The last item always on the top, direction will goes from last to first*/ 
 
     animation: xfade 15s; 
 
    } 
 
    li:nth-child(5) { 
 
     /*Put animation length double the delay (in this case delay is the actual animation length)*/ 
 
     animation: xfade 30s 15s; 
 
    } 
 
    li:nth-child(4) { 
 
     animation: xfade 30s 15s; 
 
    } 
 
    li:nth-child(3) { 
 
     animation: xfade 30s 15s; 
 
    } 
 
    li:nth-child(2) { 
 
     animation: xfade 30s 15s; 
 
    } 
 
    li:nth-child(1) { 
 
     opacity: 1; 
 
    } 
 
    
 
    @keyframes xfade{ 
 
     0%{opacity:0} 
 
     33% {opacity:1;} 
 
     100%{opacity:0} 
 
    }

<ul> 
 
     <li>1<img width="500" height="500" src="http://lorempixel.com/500/500/sports" alt="pic1"></li> 
 
     <li>2<img width="500" height="500" src="http://lorempixel.com/500/500/people" alt="pic2"></li> 
 
     <li>3<img width="500" height="500" src="http://lorempixel.com/500/500/transport" alt="pic3"></li> 
 

 
     <!-- Duplicate --> 
 
     <li>4<img width="500" height="500" src="http://lorempixel.com/500/500/sports" alt="pic1"></li> 
 
     <li>5<img width="500" height="500" src="http://lorempixel.com/500/500/people" alt="pic2"></li> 
 
     <li>6<img width="500" height="500" src="http://lorempixel.com/500/500/transport" alt="pic3"></li> 
 
    </ul>

Answer 2

Oto coś, co dało realne do myślenia :)

musiałem nałożyć 2 animacje na zmianę przezroczystości: xfade-25pct i xfade-50pct. Obie grają tylko 2 razy, gasnąc krótko po 25% i 50% animacji. Oraz dodatkowa animacja show, która sprawi, że trzeci obraz pozostanie po 2 pętlach animacji, z konieczną regułą animation-fill-mode: forwards;.

Sztuczka do krycia jest następująca: musisz podzielić animację na 4 kwartały. Jeśli chcesz, możesz zmienić całkowity czas trwania animacji z 60s na wielokrotność 4 i dostosować opóźnienia. Trzecie opóźnienie animacji jest podwójne z drugiego.

----#----#----#----#----#----#----#----#----#----# 
1st animation  | 1st animation  | 
-------------------------------------------------- 
15s | 2nd animation  | 2nd animation  | 
-------------------------------------------------- 
30s  | 3rd animation  | 3rd animation | 
----#----#----#----#----#----#----#----#----#----# 

Zapraszam do zapytania. Mam nadzieję, że to ci pomoże.

var s = 0, 
 
    c = 1; 
 
/* Code for displaying timer */ 
 
window.setInterval(function() { 
 
    s++; 
 
    document.querySelector('DIV').innerHTML = s; 
 
    if (s == 15 && c <= 2 || s == 30) { 
 
    if (s == 30) { 
 
     c = 1; 
 
    } else { 
 
     c++; 
 
    } 
 
    s = 0; 
 
    } 
 
}, 1000);

ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
} 
 

 
li { 
 
    position: absolute; 
 
    opacity: 0; 
 
} 
 

 
li { 
 
    animation: xfade-25pct 60s 2; 
 
} 
 

 
li:nth-child(2) { 
 
    animation-delay: 15s; 
 
} 
 

 
li:nth-child(3) { 
 
    animation-delay: 30s, 120s; 
 
    animation-name: xfade-50pct, show; 
 
    animation-duration: 60s, 1s; 
 
    animation-iteration-count: 2, 1; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@keyframes xfade-25pct { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    2%, 
 
    25% { 
 
    opacity: 1; 
 
    } 
 
    27% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@keyframes xfade-50pct { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    2%, 
 
    50% { 
 
    opacity: 1; 
 
    } 
 
    52% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@keyframes show { 
 
    0%, 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}

<DIV></DIV> 
 
<ul> 
 
    <li><img width="500" height="500" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="pic1"></li> 
 
    <li><img width="500" height="500" src="http://whc.unesco.org/uploads/thumbs/news_920-500-500-20151015155516.jpg" alt="pic2"></li> 
 
    <li><img width="500" height="500" src="https://i.pinimg.com/736x/4c/17/65/4c176537aee906de294138c3bac5b8f5--merry-christmas-love-coffee-aroma.jpg" alt="pic3"></li> 
 
</ul>