I'm trying to create a roller coaster style animation with CSS.
and I want to know how to curve the "coaster" when it's in the loop stage.
I'm searching for an all CSS solution but if there's a need for a little bit of JavaScript I'm OK with that.
my code so far:
#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>