Che io sappia non è possibile riprendere il loop da uno specifico keyframe.
Una soluzione può essere quella di impostare due diverse animazioni, a quel punto puoi applicare la prima animazione per intero, che sia eseguita una sola volta, e la seconda animazione che riparta dal punto finale della prima, con un delay (uguale al tempo stabilito per la prima) e il loop alternato infinito.
Qui un semplice esempio:
codice HTML:
<!DOCTYPE HTML>
<html lang="it">
<head>
<title>Esempio</title>
<style>
#ball {
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
animation: jump-start .8s ease-in, jump-loop 1s .8s ease-out alternate infinite;
}
@keyframes jump-start {
to {transform: translate3d(0,20%,0) }
}
@keyframes jump-loop {
from {transform: translate3d(0,20%,0) }
to {transform: translate3d(0,5%,0) }
}
</style>
</head>
<body>
<div id=ball></div>
</body>
</html>
Fai sapere se può andare bene. Il codice è abbastanza intuitivo ma se hai dubbi non esitare a chiedere.
Buon proseguimento.
Rispondi quotando
