Witam
Wie ktoś może jak stworzyć efekt takich płynących obrazków jak tutaj https://www.apple.com/pl/tv/
Stworzyłem coś takiego, niestety wyświetla mi się tylko 1 obraz:
<div class="tło">
<p class="akapit">Witajcie</p>
</div>
.tło {
border:0.5px solid #EEE;
animation:ruch 3000s linear infinite alternate;
-webkit-animation:ruch 3000s linear infinite alternate;
background-image:
url("1.png"),
url("2.png"),
url("3.png"),
url("4.png");
background-size: contain;
}
.akapit {
font-size:5em;
font-family: Courgette,cursive;
color: rgba(0,0,0,0.8);
font-weight: bold;
width:10%;
margin:3.5em auto;
text-align: center;
}
@keyframes ruch{
0% {background-position:0 0, 0 0, 0 0;}
100% {background-position:100000px 0, 75000px 0, 50000px 0;}
}
@-webkit-keyframes ruch{
0% {background-position:0 0, 0 0, 0 0;}
100% {background-position:100000px 0, 75000px 0, 50000px 0;}
}
A efekt wygląda jak w załączniku wszystko się rusza ale wyświetlany jest cały czas tylko jeden obraz.