Sto cercando di creare un'animazione in stile montagne russe con CSS.
Voglio sapere come curvare il "sottobicchiere" quando è nella fase del ciclo.
Sto cercando una soluzione tutto CSS, ma se c'è bisogno di un po 'di JavaScript, sono d'accordo.
il mio codice finora:
#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>