La proprietà Animazione CSS rimane dopo l'animazione

92

Sto cercando di mantenere una proprietà di animazione CSS dopo il completamento, è possibile?

Questo è quello che sto cercando di ottenere ...

L'elemento dovrebbe essere nascosto quando l'utente atterra sulla pagina, dopo 3 secondi (o qualsiasi altra cosa), dovrebbe svanire e una volta completata l'animazione dovrebbe rimanere lì.

Ecco un tentativo di violino ... http://jsfiddle.net/GZx6F/

Ecco il codice per la conservazione ...

<h2>Test</h2>

<style>
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

h2 {
    animation: fadeIn 1s ease-in-out 3s;
}
</style>

So come farlo con jQuery .. sarebbe così ...

<h2>test</h2>

<script>
  $(document).ready(function(){
    $('h2').hide().delay(3000).fadeIn(3000)
  });
</script>

css css-animations

— SparrwHawk
fonte

W3schools è obsoleto? Dice che Chrome e FireFox supportano solo alternative.

— iambriansreed

5

@iambriansreed: presumo sempre che lo sia :)

— BoltClock

4

@iambriansreed non fa nemmeno clic sui risultati della ricerca di w3schools. Se lo fai accidentalmente, distogli lo sguardo dal monitor e premi il pulsante Indietro del mouse.

— doug65536

162

Penso che tu stia cercando la animation-fill-modeproprietà CSS3

https://developer.mozilla.org/en/CSS/animation-fill-mode

La proprietà CSS della modalità di riempimento dell'animazione specifica in che modo un'animazione CSS deve applicare gli stili alla sua destinazione prima e dopo l'esecuzione.

per il tuo scopo prova a impostare

h2 {
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;  
}

Impostazione del valore in avanti «l'obiettivo manterrà i valori calcolati impostati dall'ultimo fotogramma chiave incontrato durante l'esecuzione»

— Fabrizio Calderan
fonte

1

Grazie Fabrizio, è fantastico, accetterò quella risposta. Sta succedendo solo una cosa strana di cui mi chiedo se ne sai qualcosa: su iOS (non ho testato nient'altro), il conto alla rovescia per l'easy-in viene sospeso ogni volta che scorro, ad esempio se inizio a scorrere subito quando la pagina viene caricata non si dissolve. Ma quando smetto di scorrere i 3 iniziano il conto alla rovescia. È solo il comportamento predefinito di iOS? Grazie

— SparrwHawk

Che fantastica soluzione.

— Lalnuntluanga Chhakchhuak

16

Oltre alla risposta di @Fabrizio Calderan , c'è da dire che puoi anche richiedere direttamente la animation-fill-modeproprietà . Quindi dovrebbe funzionare anche quanto segue:forwardsanimation

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.9;
  }
}

h2 {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 3s forwards;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>

Espandi lo snippet

— yckart
fonte

0

Mi è successo qualcosa di simile. Ho aggiunto la posizione: relativa all'elemento che si stava animando e che l'ha fissata per me.

— tyau
fonte

0

Come animare un elemento e farlo rimanere durante l'animazione:

// Beggin

#box {
  /* Give it a width, a height and a background so can see it  */
  width: 200px;
  height: 200px;
  /* Unimportant styling */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
  border-radius: 7px;
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
  
  /* Starts here: */
  opacity: 0;
  animation: yourName 2800ms ease-in-out 0s forwards;
}

@keyframes yourName {
  0% /* (from) */ {
    opacity: 0;
  }
  100% /* (to) */ {
    opacity: 1;
  }
}

<div id="box"></div>

Espandi lo snippet

— codeWithMe
fonte