La propriété CSS Animation reste après l'animation

92

J'essaie de faire en sorte qu'une propriété d'animation CSS reste après avoir terminé, est-ce possible?

C'est ce que j'essaye de réaliser ...

L'élément doit être masqué lorsque l'utilisateur atterrit sur la page, après 3 secondes (ou autre), il doit apparaître en fondu et une fois l'animation terminée, il doit y rester.

Voici une tentative de violon ... http://jsfiddle.net/GZx6F/

Voici le code de conservation ...

<h2>Test</h2>

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

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

Je sais comment faire cela avec jQuery .. ce serait comme ça ...

<h2>test</h2>

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

css css-animations

— SparrwHawk
source

W3schools est- il obsolète? Il indique que Chrome et FireFox ne prennent en charge que les alternatives.

— iambriansreed

5

@iambriansreed: Je suppose toujours que c'est :)

— BoltClock

4

@iambriansreed ne clique même pas sur les résultats de recherche de w3schools. Si vous le faites accidentellement, détournez le regard de votre moniteur et appuyez sur le bouton de retour de votre souris.

— doug65536

162

Je pense que vous recherchez la animation-fill-modepropriété CSS3

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

La propriété CSS animation-fill-mode spécifie comment une animation CSS doit appliquer des styles à sa cible avant et après son exécution.

pour votre but, essayez simplement de définir

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

Définition de la valeur avant «la cible conservera les valeurs calculées définies par la dernière image clé rencontrée lors de l'exécution»

— Fabrizio Calderan
source

1

Merci Fabrizio, c'est super, j'accepte cette réponse. Il se passe une chose étrange sur laquelle je me demande si vous savez quelque chose - sur iOS (je n'ai rien testé d'autre), le compte à rebours de la facilité d'entrée est interrompu chaque fois que je fais défiler, par exemple si je commence à faire défiler tout de suite lorsque la page se charge il ne s'estompe pas. Mais quand j'ARRÊTE de faire défiler les 3, le compte à rebours commence. Est-ce juste le comportement iOS par défaut? Merci

— SparrwHawk

Quelle solution fantastique.

— Lalnuntluanga Chhakchhuak

16

En plus de la réponse de @Fabrizio Calderan , il faut dire que vous pouvez même appliquer la animation-fill-modepropriété forwardsdirectement à animation. Donc, ce qui suit devrait également fonctionner:

@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>

Développer l'extrait

— yckart
source

0

J'ai eu quelque chose de similaire qui m'est arrivé. J'ai ajouté la position: par rapport à l'élément qui animait et qui l'a corrigé pour moi.

— tyau
source

0

Comment animer un élément et le faire rester pendant l'animation:

// 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>

Développer l'extrait

— codeWithMe
source