Maintien de l'état final à la fin d'une animation CSS3

302

J'exécute une animation sur certains éléments définis opacity: 0;dans le CSS. La classe d'animation est appliquée surClick et, à l'aide d'images clés, elle change l'opacité de 0à 1(entre autres).

Malheureusement, lorsque l'animation est terminée, les éléments reviennent à opacity: 0(dans Firefox et Chrome). Ma pensée naturelle serait que les éléments animés maintiennent l'état final, remplaçant leurs propriétés d'origine. N'est-ce pas vrai? Sinon, comment puis-je faire en sorte que l'élément le fasse?

Le code (versions préfixées non incluses):

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

1

Je posterai mon propre avis de répétition: stackoverflow.com/questions/9196694/css3-animation-scale Au moins le mien a un titre plus instructif!

— Dan

doublon possible de CSS3 Animate: comment faire en sorte que l'objet ne revienne pas à sa position initiale après l'exécution de l'animation?

— Michael Mullany

531

Essayez d'ajouter animation-fill-mode: forwards;. Par exemple, comme ceci:

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

— Christofer Vilander
source

1

Ouais c'est ça. Je vérifierai votre réponse quand je le pourrai. Si des chefs CSS veulent commenter la logique derrière cela, j'aimerais savoir!

— Dan

8

Vous pouvez en savoir plus sur la propriété animation-fill-mode ici - dev.w3.org/csswg/css3-animations/#animation-fill-mode-property J'espère que cela vous aidera!

— Christofer Vilander

6

@Dan, la forwardsvaleur de la animation-fill-modepropriété garantit que l'élément contiendrait le dernier état d'image clé de l'animation une fois l'animation terminée. par exemple, si votre animation passe widthde 0 à 100 pixels, cette propriété garantit que l'élément reste large de 100 pixels après la fin de l'animation.

— Farzad YZ

5

n'oubliez pas de préciser le 100% / topoint @keyframesinon cela ne fonctionnera pas.

— Tomasz Mularczyk

animation-fill-mode: les attaquants ont aussi fait l'affaire pour moi, mais seulement après avoir ajouté l'impératif '! important' à la règle

— shayuna

26

Si vous utilisez plus d'attributs d'animation, le raccourci est le suivant:

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

Cela donne:

2s durée
linear fonction de synchronisation
0.5s retard
1 nombre d'itérations (peut être infini)
normal direction
forwards fill-mode (défini à l'envers si vous voulez avoir la compatibilité pour utiliser la position finale comme état final)

— agiopnl
source

14

SI VOUS N'UTILISEZ PAS LA VERSION À MAIN COURTE: Assurez-vous que animation-fill-mode: forwardsc'est APRÈS la déclaration d'animation ou cela ne fonctionnera pas ...

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

contre

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

— Taylor A. Leach
source

1

Vous avez raison. Mis à jour ma réponse. Merci, ça m'a échappé haha.

— Taylor A. Leach

4

Utilisez le mode d' animation-remplissage: vers l'avant;

animation-fill-mode: forwards;

L'élément conservera les valeurs de style définies par la dernière image clé (dépend de l'animation-direction et de l'animation-itération-count).

Remarque: La règle @keyframes n'est pas prise en charge dans Internet Explorer 9 et les versions antérieures.

Exemple de travail

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>

Développer l'extrait

— Deepu Reghunath
source