J'essaie de créer une animation de style roller coaster avec CSS.
Je veux savoir comment courber le "coaster" quand il est en boucle.
Je recherche une solution entièrement CSS mais s'il y a un besoin d'un peu de JavaScript, je suis d'accord avec ça.
mon code jusqu'à présent:
#container {
width: 200px;
height: 300px;
margin-top: 50px;
position: relative;
animation: 10s infinite loop;
animation-timing-function: linear;
}
#coaster {
width: 100px;
height: 10px;
background: lightblue;
position: absolute;
bottom: 0;
left: 1px;
right: 1px;
margin: 0 auto;
}
@keyframes loop {
from {
margin-left: -200px;
}
30% {
margin-left: calc(50% - 75px);
transform: rotate(0deg);
}
60% {
margin-left: calc(50% - 125px);
transform: rotate(-360deg);
}
to {
transform: rotate(-360deg);
margin-left: 100%;
}
}
<div id="container">
<div id="coaster"></div>
</div>