Mantenimento dello stato finale alla fine di un'animazione CSS3

301

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

Sfortunatamente, quando l'animazione termina, 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, scavalcando le loro proprietà originali. Non è vero? E se no, come posso ottenere l'elemento per farlo?

Il codice (versioni prefissate 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; }
}

css css-animations

— Dan
fonte

1

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

— Dan,

possibile duplicato di CSS3 Animate: come fare in modo che l'oggetto non torni alla sua posizione iniziale dopo che l'animazione è stata eseguita?

— Michael Mullany,

530

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

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

— Christofer Vilander
fonte

1

Sì, tutto qui. Controllerò la tua risposta quando posso. Se qualche CSS-head vuole commentare la logica dietro quella richiesta, mi piacerebbe saperlo!

— Dan,

8

Puoi leggere la proprietà di animazione-fill-mode qui - dev.w3.org/csswg/css3-animations/#animation-fill-mode-property Spero che ti aiuti!

— Christofer Vilander,

6

@Il forwardsvalore della animation-fill-modeproprietà si assicura che l'elemento mantenga l'ultimo stato del fotogramma chiave dell'animazione al termine dell'animazione. ad esempio se l'animazione cambia widthda 0 a 100px, questa proprietà si assicura che l'elemento rimanga largo 100px al termine dell'animazione.

— Farzad YZ,

5

non dimenticare di specificare il 100% / topunto in @keyframealtrimenti non funzionerà.

— Tomasz Mularczyk,

animation-fill-mode: forward ha funzionato anche per me, ma solo dopo aver aggiunto l'imperativo "! important" alla regola

— shayuna

26

Se stai usando più attributi di animazione la scorciatoia è:

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

Questo da:

2s durata
linear temporizzazione funzione
0.5s ritardo
1 iteration-count (può essere infinito)
normal direzione
forwards fill-mode (impostare all'indietro se si desidera avere la compatibilità per utilizzare la posizione finale come stato finale)

— agiopnl
fonte

14

SE NON SI UTILIZZA LA VERSIONE MANUALE CORTA: assicurarsi che animation-fill-mode: forwardssia DOPO la dichiarazione di animazione o che non funzionerà ...

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

vs

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;

— Taylor A. Leach
fonte

1

Hai ragione. Aggiornato la mia risposta. Grazie, mi è sfuggito di mente haha.

— Taylor A. Leach,

4

Usa animazione-fill-mode: forward;

animation-fill-mode: forwards;

L'elemento manterrà i valori di stile impostati dall'ultimo fotogramma chiave (dipende dalla direzione e dal conteggio delle animazioni).

Nota: la regola @keyframes non è supportata in Internet Explorer 9 e versioni precedenti.

Esempio funzionante

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
  /* animation-name: bubble; 
  animation-duration: 3s;
  animation-fill-mode: forwards; */
}

/* Safari */
@-webkit-keyframes bubble  {
  0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

/* Standard syntax */
@keyframes bubble  {
   0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

<h1>The keyframes </h1>
<div></div>

Espandi frammento

— Deepu Reghunath
fonte