Aggiungi casuale a un ciclo di animazione css3

Ogni volta che si creano loop di animazione css3, mi piacerebbe modificare una variabile nello stile.Aggiungi casuale a un ciclo di animazione css3

Per esempio il seguente css scende un gruppo di paracadute dall'alto verso il basso dello schermo:

@-webkit-keyframes fall { 
    0% { top: -300px; opacity: 100; } 
    50% { opacity: 100; } 
    100% { top: 760px; opacity: 0; } 
} 

#parachute_wrap { 
    -webkit-animation-name: fall; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 70s; 
    -webkit-animation-timing-function: linear; 
}

Idealmente tuttavia, alla fine di ogni ciclo Vorrei gettare in un X casuale posizione.

Lo stile predefinito del gruppo è:

#parachute_wrap { 
    position: absolute; 
    top: -300px; 
    left: 50%; 
    margin-left: 140px; 
}

Così, dopo 70 secondi, vorrei modificare l'attributo margin-sinistra o da sinistra ovunque tra -200px e 200px.

ho capito che potrei fare qualcosa di simile con jQuery e ogni volta():

$('#parachute_wrap').everyTime (70000, function(){ 
    $("#parachute_wrap").css({left: Math.floor(Math.random() * 51) + 5 + '%'},0); 
});

Ma c'è un modo per legare il ciclo css per js per fare questo? cioè c'è una chiamata di ritorno di qualsiasi tipo che js può ascoltare per una perfetta sincronizzazione con l'animazione? Temo che se uso JS su un timer degli anni 70 che cosa accadrà è che il timing non si sincronizzerà correttamente, ea metà dell'animazione css il js farà il suo ciclo temporale ei paracadute saltano per metà modo attraverso l'animazione.

Come ti avvicineresti a questo?

fonte

2012-05-15 willdanceforfun

Se la sincronizzazione è la vostra unica preoccupazione, è possibile cambiare il parachute_wrap' css 'da un ID a una classe, poi assegna agli elementi che si desidera all'interno di un $ (document)' .ready() 'evento che imposta il tuo timer subito dopo, anche all'interno di' .ready() '. Potrebbe esserci un modo più semplice, ma questo è quello che posso pensare in questo momento. –

Sembra quasi un duplicato di [questa domanda] (http://stackoverflow.com/questions/4797675/how-do-i-re-trigger-a-webkit-css-animation-via-javascript). La risposta accettata sembra offrire una via da seguire. –

Le animazioni CSS3 hanno un evento animationEnd attivato al termine dell'animazione.

È possibile bind tale evento per il vostro elemento animato innescando così che left cambiamento alla fine di ogni animazione:

$('#parachute_wrap').on('webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd', function(e) { 
    $(this).css({left: Math.floor(Math.random() * 51) + 5 + '%'},0); 
});

In questo modo, si sa esattamente quando le estremità di animazione e il cambiamento left corretta applicazione.

fonte

2012-05-16 00:56:53 Zuul

È davvero fantastico. Perfezionare. – willdanceforfun

C'è anche un evento animationiteration attivato all'inizio di ogni nuova iterazione di animazione, vale a dire ogni iterazione tranne la prima.

$('#parachute_wrap').on('animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration', function(e) { 
    $(this).css({left: Math.floor(Math.random() * 51) + 5 + '%'},0); 
});

http://www.w3.org/TR/css3-animations/#animationiteration

fonte

2013-07-05 12:51:15 maiis

Aggiungi casuale a un ciclo di animazione css3

risposta

Problemi correlati