web-dev-qa-db-fra.com

Comment garder des styles après l'animation?

Je travaille dans un portefeuille pour montrer quand je postule à ma prochaine étude. Depuis que nous vivons en 2012, il a des tonnes d'animations de fantaisie et de malbouffe CSS3, juste pour leur donner le sentiment de "nous avons besoin de ce type". J'ai un petit problème pour le moment.

Ceci est une petite partie d'un élément spécifique:

/* This is the CSS of the elements with the id called 'fadein' */
#fadein {
    -moz-animation-duration: 2s;
    -moz-animation-name: item;
    -moz-animation-delay: 4.5s;
    -webkit-animation-duration: 5s;
    -webkit-animation-name: item;
-webkit-animation-delay: 4.5s;
opacity:0;
-webkit-opacity:0;
}

@-webkit-keyframes item {
from {
-webkit-opacity: 0;
     }
to { 
-webkit-opacity: 1;
 }
}

Veuillez noter que j'ai laissé tomber les images clés de Firefox, car ils sont toutaux identiques. DROITE, CSS formatés laids qui fait des éléments avec l'ID 'Fadein' ... Fade in.

Le problème est que les éléments disparaissent à nouveau après la fin de l'animation. Cela transforme les CSS formatés laids en CSS inutilisable.

Quelqu'un a-t-il une idée de la façon de conserver le style changé après l'animation?

Je suppose que cette question a été posée auparavant et je suis assez désolé pour cela si oui.

htmlcsscss-animations
30
amees_me

Essayez avec:

#fadein {
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}
58
methodofaction

Duopixels Réponse est la bonne façon, mais pas totalement entre navigateur croiseur, ce plugin JQuery active les rappels d'animation et vous pouvez styler les éléments comment vous aimez dans la fonction de rappel: https://github.com/krazyjakee/krazyjake/ jquery-keyframes

1
Jake Cattrall