Mantenimento dello stato finale alla fine dell'animazione CSS3

177

Sto eseguendo un'animazione su alcuni elementi impostati su opacity: 0; nel CSS. La classe di animazione viene applicata su Click e, utilizzando i fotogrammi chiave, cambia l'opacità da 0 a 1 (tra le altre cose).Mantenimento dello stato finale alla fine dell'animazione CSS3

Sfortunatamente, quando l'animazione è finita, gli elementi tornano a opacity: 0 (sia in Firefox che in Chrome). Il mio pensiero naturale sarebbe che gli elementi animati mantengano lo stato finale, annullando le loro proprietà originali. Non è vero? E se no, come posso ottenere l'elemento per farlo?

Il codice (prefisso versioni non incluse):

@keyframes bubble { 
    0% { transform:scale(0.5); opacity:0.0; } 
    50% { transform:scale(1.2); opacity:0.5; } 
    100% { transform:scale(1.0); opacity:1.0; } 
}

fonte

2012-10-20 Dan

Pubblicherò il mio avviso di ripetizione: http://stackoverflow.com/questions/9196694/css3-animation-scale Almeno il mio ha un titolo più istruttivo! – Dan

possibile duplicato di [Animazione CSS3: Come fare in modo che l'oggetto non ritorni alla sua posizione iniziale dopo l'esecuzione dell'animazione?] (Http://stackoverflow.com/questions/6897724/css3-animato-come-a-have-the- object-not-revert-to-its-initial-position-after-an) –

300

Prova ad aggiungere animation-fill-mode: forwards;. Ad esempio come questo:

animation: bubble 1.0s forwards; 
-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */

fonte

2012-10-20 18:02:03

Sì, è così. Controllerà la tua risposta quando posso. Se qualche capo di CSS vuole commentare la logica dietro quella richiesta, mi piacerebbe sapere! – Dan

Qui puoi leggere la proprietà della modalità fill-animation: http://dev.w3.org/csswg/css3-animations/#animation-fill-mode-property Speranza che aiuti! –

@Dato il valore 'inoltra' della proprietà' animation-fill-mode' rende sicuro che l'elemento manterrà l'ultimo stato del fotogramma chiave dell'animazione al termine dell'animazione. per esempio se la tua animazione cambia 'width' da 0 a 100px, questa proprietà si assicura che l'elemento rimanga largo 100px dopo che l'animazione finisce. –

Se si utilizza più attributi animazione la scorciatoia è:

animation: bubble 2s linear 0.5s 1 normal forwards;

per la durata 2s, temporizzazione funzione lineare, 0.5s ritardo, 1 iterazione-count, direzione normale , forward fill-mode

fonte

2017-01-14 00:28:01 agiopnl

Mantenimento dello stato finale alla fine dell'animazione CSS3

risposta

Problemi correlati