Pausa tra animazioni fotogramma chiave

ottenuto una semplice animazione con fotogrammi chiave.Pausa tra animazioni fotogramma chiave

@-webkit-keyframes rotation { 
    0% { -webkit-transform: rotate(10deg); } 
    25% { -webkit-transform: rotate(5deg); } 
    50% { -webkit-transform: rotate(10deg); } 
    75% { -webkit-transform: rotate(5deg); } 
    100% { -webkit-transform: rotate(10deg); } 

}

.class { -webkit-animation: rotation 1s infinite; }

E 'possibile aggiungere una pausa tra questa animazione keyframe? Ti piace 5 secondi? So che c'è un -webkit-animation-delay ma questo ritarda solo l'inizio dell'animazione.

P.S. So che è solo il prefisso del webkit ... alla fine lo prendo attraverso il prefisso.

fonte

2012-07-27 Denny Mueller

Dai un'occhiata a questo tutorial che ha demo e ripercorre ogni stile e classe http://www.leemunroe.com/css3-animations/ – Anagio

perché non rimuovere semplicemente .class? (se la classe è solo l'animazione) –

@denny_mueller stavo pensando alla stessa soluzione della tua modifica. Perché non lo fornite come risposta e contrassegnato come accettato? – Anson

ottenuto una soluzione, ma sembra po 'sporco

@-webkit-keyframes rotation { 
     0% { -webkit-transform: rotate(10deg); } 
     5% { -webkit-transform: rotate(5deg); } 
     10% { -webkit-transform: rotate(10deg); } 
     15% { -webkit-transform: rotate(5deg); } 
     20% { -webkit-transform: rotate(10deg); } 
     100% { -webkit-transform: rotate(10deg); } 

    } 
.class { -webkit-animation: rotation 5s infinite; }

fonte

2012-11-25 13:22:26

grazie ... mi ha aiutato molto :) –

Davvero utile, e bella logica +1 –

Dopo aver lottato con questo problema me stesso e l'aiuto di Denny Mueller ho trovato che la chiave è quello di fermare prima del 100%.

È possibile utilizzare il ritardo per iniziare con un ritardo e dopo la prima iterazione, il ritardo sarà il tempo che rimane dopo il completamento dell'animazione.

Ecco quello che ho usato per la mia realizzazione:

@-webkit-keyframes spincube { 
    from,to  {             } 
    8%,14%  { -webkit-transform: rotateY(-90deg);    } 
    24%,30%  { -webkit-transform: rotateY(-90deg) rotateZ(90deg); } 
    40%,46%  { -webkit-transform: rotateY(180deg) rotateZ(90deg); } 
    56%,62%  { -webkit-transform: rotateY(90deg) rotateX(90deg); } 
    72%,78%  { -webkit-transform: rotateX(90deg);     } 
    88%,94%  { -webkit-transform: rotateX(0deg);     } 
}

Come potete vedere, mi fermo al 94% e il restante 6% è utilizzato per mettere in pausa il primo fotogramma.

fonte

2013-08-19 10:29:54

Davvero utile, e bella logica +1 –

Pausa tra animazioni fotogramma chiave

risposta

Problemi correlati