Jak zapętlić animację CSS dla kilku img?

pytanie zadane 25 września 2020 w HTML i CSS przez Pantomas Nowicjusz (230 p.)

Wymyśliłem sobie taka animację:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="pl">
<head>
<title>animacja</title>
<meta charset="utf-8">
<style> 
html, body {overflow: hidden;}
@keyframes animacja
{
0% {left:100%;}
5%{left:30%;}
90%{left:30%;}
100%{left:-110%}
}

#animacja img
{
  position:absolute;
  margin:0 auto; 
  left: 100%;
  height:280px;
  width:450px;
}
#animacja img:nth-of-type(1)
{
   animation: animacja 6s 0s linear infinite normal;  
  -webkit-animation: animacja 6s 0s linear infinite normal;  
}
#animacja img:nth-of-type(2)
{
   animation: animacja 6s 6s linear infinite normal;  
  -webkit-animation: animacja 6s 6s linear infinite normal;  
}
#animacja img:nth-of-type(3)
{
   animation: animacja 6s 12s linear infinite normal;  
  -webkit-animation: animacja 6s 12s linear infinite normal;  
}
#animacja img:nth-of-type(4)
{
   animation: animacja 6s 18s linear infinite normal;  
  -webkit-animation: animacja 6s 18s linear infinite normal;  
}  
</style>
</head>
    
<body>
<div id="animacja">
  <img src="http://css3.bradshawenterprises.com/images/Birdman.jpg">
  <img src="http://css3.bradshawenterprises.com/images/Turtle.jpg">
  <img src="http://css3.bradshawenterprises.com/images/Rainbow%20Worm.jpg">
  <img src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg">
    
</div>

</body>
</html>

Wszystko ładnie się zaczyna, animują się kolejno obrazki ale tylko do ostatniego. Zapętla się tylko "img:nth-of-type(4)" a chciałbym aby całość była w nieskończonej pętli. W animacji poniekąd sugerowałem się rozwiązaniem ze strony: http://css3.bradshawenterprises.com/cfimg/#cfimg3 a dokładnie akapitem "Demo with multiple images" gdzie animacja jest właśnie zapętlona. Być może potrzebny jest jakiś skrypt js ale nie jestem w stanie tego ustalić :(

Co zrobić aby zapętlić taką animację?

2 odpowiedzi

odpowiedź 26 września 2020 przez VBService Ekspert (253,100 p.)

Nie jest idealna, ale coś na początek ... CodePen

1	komentarz 26 września 2020 przez adamsawicki Bywalec (2,260 p.) Wygląda dobrze. Przerwa pomiędzy ostatnim slajdem a pierwszym z kolejnej iteracji jest nieco widoczna. Zmiana wartości `animation-duration` na `8s` pomogła.

komentarz 26 września 2020 przez Pantomas Nowicjusz (230 p.)

Ale to zupełnie inna animacja :(

Wydaje mi się, ze problem leży w kolejności warstw stąd wrażenie, że zapętla się tylko czwarty (ostatni) element. Nie wiem jak tu pokombinować z z-index bo co bym nie zrobił to jest źle

odpowiedź 28 września 2020 przez Pantomas Nowicjusz (230 p.)

zrobiłem :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="pl">
<head>
<title>animacja</title>
<meta charset="utf-8">
<style> 
html, body {overflow: hidden;}
@keyframes animacja
{
0% {left:100%; visibility:visible;}
1.5% {left:30%;}
20% {left:30%;}
25%{left:-100%;}
50%{left:-100%;visibility:hidden;}
100%{left:100%;visibility:hidden;} 
}
#animacja img
{
  position:absolute;
  margin:0 auto; 
  left: 100%;
  height:280px;
  width:450px;
}
#animacja img:nth-of-type(1)
{
animation: animacja 24s 0s linear infinite normal;
-webkit-animation: animacja 24s 0s linear infinite normal; 
}
#animacja img:nth-of-type(2)
{
animation: animacja 24s 6s linear infinite normal; 
-webkit-animation: animacja 24s 6s linear infinite normal; 
}
#animacja img:nth-of-type(3)
{
animation: animacja 24s 12s linear infinite normal; 
-webkit-animation: animacja 24s 12s linear infinite normal; 
}
#animacja img:nth-of-type(4)
{
animation: animacja 24s 18s linear infinite normal; 
-webkit-animation: animacja 24s 18s linear infinite normal; 
} 
</style>
</head>
     
<body>
<div id="animacja">
  <img src="http://css3.bradshawenterprises.com/images/Birdman.jpg">
  <img src="http://css3.bradshawenterprises.com/images/Turtle.jpg">
  <img src="http://css3.bradshawenterprises.com/images/Rainbow%20Worm.jpg">
  <img src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg">
     
</div>
 
</body>
</html>

i działa tak jak chciałem :)

1	komentarz 28 września 2020 przez radek024 Szeryf (77,160 p.) Ale czy na pewno poprawnie? Czy obrazki to nie lista? Ponadto, jeżeli idzie o ruch, to zalecany jest transform aniżeli left/right/.... Przeanalizuj kod :)

komentarz 29 września 2020 przez Pantomas Nowicjusz (230 p.)

Z całym szacunkiem ale Twój post merytorycznie niczego nie wnosi :( "Czy poprawnie?" - ocena subiektywna. Zamierzony efekt uzyskałem natomiast czy kod jest optymalny tego nie wiem bo nie znalazłem innego rozwiązania. "Czy obrazki to nie lista?" - patrząc na to z tej perspektywy to tak, jest to lista i co z tego ma wynikać? Kto zaleca "transform" zamiast "animation"? Przeanalizowałem kod i nie znalazłem odpowiedzi :(

Skoro Twoim zdaniem nie rozwiązałem prawidłowo problemu to jaka jest Twoja propozycja?

Nie jestem ekspertem, uczę się sam na konkretnych przypadkach. Jak mi coś nie wychodzi to pytam mądrzejszych/bardziej doświadczonych o radę.

komentarz 29 września 2020 przez radek024 Szeryf (77,160 p.)

"Czy poprawnie?" - ocena subiektywna.

Nie, to nie jest ocena subiektywna. Kod, jaki piszemy, powinniśmy tworzyć w sposób logiczny i spójny - a przede wszystkim poprawny. W istocie kod HTML powinien być pisany w sposób semantyczny. Dzięki temu strona oddaje swój sens nie poprzez wygląd, a poprzez strukturę. A to bardzo ważne - żyjemy w dobie wszędobylskiego machine learningu. Dobrze napisana strona przekłada się na dziesiątki aspektów, z największym naciskiem na SEO oraz dostępność.

a. "Czy obrazki to nie lista?" - patrząc na to z tej perspektywy to tak, jest to lista i co z tego ma wynikać?

W takim razie powinno być to zakodowane jako lista elementów, a nie dowolne cztery elementy obok siebie. Tworzą pewną strukturę, która nie jest przełożona na kod. A to rażący błąd w zakresie stron.

Kto zaleca "transform" zamiast "animation"?

Po pierwsze, mylisz pojęcia. Animation to właściwość CSSa odpowiedzialna za sposób ruchu elementów na stronie, natomiast transform służy do poruszania nimi. Właściwości left/top/right/bottom odpowiadają za umiejscowienie elementu. O tym, abyś używał transform jest kilka artykułów w sieci:

Skoro Twoim zdaniem nie rozwiązałem prawidłowo problemu to jaka jest Twoja propozycja?

Nie oburzaj się a dopytuj :D Nawet nie tyle co dopytuj, a szukaj odpowiedzi. Pytań już zadano tyle w kwestii pisania stron, że na luzie - nawet na podstawie moich starych odpowiedzi - byłbyś w stanie wyłapać problem z semantyką.

komentarz 30 września 2020 przez Pantomas Nowicjusz (230 p.)

Nie obraź się ale nadal twierdzę, że Twój post nie wniósł MERYTORYCZNIE nic do poruszonego tematu. Masz rację, że kod nie jest w pełni semantycznie poprawny ale nie w semantyce był problem, podobnie jak brak zakodowania przeze mnie listy więc Twój głos wydaje mi się zupełnie "nietrafiony". Inaczej by to wyglądało gdybyś zaproponował jakieś rozwiązanie i przy okazji zwrócił uwagę na moje "stylistyczne" błędy. A tak to tylko przeczytałem jakiś "rebus".
Byłem kiedyś wykładowcą akademickim i nie oceniałem prac studentów pod kątem stylistyki (choć czasem wołałem o pomstę do nieba) ale ich wiedzę merytoryczną. Niektórzy, nie powiem że wybitni ale na pewno wyróżniający się tworzyli rewelacyjne projekty, których nie powstydziliby się geniusze inżynierii ale dokumentacja była do bani i to, później, po doszlifowaniu merytorycznym było dopiero dalej obrabiane... to tak na marginesie.
Ostatnią profesjonalną stronę a w zasadzie cały portal napisałem jakieś 20 lat temu. Od tamtej pory wiele się zmieniło, wiele pozapominałem. Dziś z uwagi na niski budżet projektu muszę sam napisać wielowątkowy kod. Przypominam sobie to i owo ale niektóre rzeczy wymagają szperania w necie. Nie wszystko da się dopasować do swoich potrzeb. Szukałem i w tym konkretnym przypadku natknąłem się na stronę cytowaną we wstępnym poście. Wzorowałem się na zawartej tam metodyce stąd moje pierwsze wypociny, które przysporzyły mi trochę kłopotu.. Nie pisze tego aby się tłumaczyć bo w sumie nie mam z czego tylko po to abyś nie myślał, że nie szukałem.
Przeglądając różne fora często napotykam komentarze w Twoim stylu, które w sumie nic nie wnoszą merytorycznie czy wręcz są nie na temat. Efekt tego jest taki, że tracimy mnóstwo czasu na przebrnięcie przez wszystkie teksty aby dowiedzieć się na koniec, że w zasadzie niczego się tu nie dowiemy :( Przykład? to właśnie ten zaczęty przeze mnie wątek. Ktoś z zewnątrz ma w nosie, że napisany przeze mnie kod jest mniej lub bardziej semantycznie poprawny ale to czy da się i jak rozwiązać konkretny problem. Dla większości szukających znalezione rozwiązanie będzie wskazówką metodyczną a zachwianą semantykę ewentualnie sobie poprawi.
Doceniam Twoją wiedzę i domyślam się, że jesteś "web" ekspertem ale sorki, nie wiem skąd przekonanie, że czytałem Twoje wszystkie stare odpowiedzi. Jeśli w podobieństwie do mojego problemu było ich dużo to przyznam szczerze, że nie natknąłem się na żadną. A jeśli tak to w dobrym tonie, a może na zasadzie szanowania czasu, mógłbyś przytoczyć swoją wypowiedź w stylu sprawdź moją wypowiedź z ... w... Oczywiście jeśli chcesz komuś pomóc a nie tylko zaistnieć w sieci.
Proponuje zamknąć naszą dyskusję choć ewentualne sugestie innego rozwiązania problemu będą mile widziane :)