À l'aide de l'affichage avec des animations css3? Comment masquer/afficher des éléments pendant/après les animations?

J'ai un div qui j'ai besoin de l'animer de l'opacité de 1 - 0, PUIS le cacher, comme certains d'entre vous le savent, l'ajout de propriétés d'affichage de substituer transitoire de valeurs et de masquer l'élément tout de suite, alors je me demandais si il existe un moyen en css pour animer c'est l'opacité, PUIS le cacher?

Voici ce que j'ai essayé:

@keyframes infrontAnimation {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 1;
  }
  50% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
  100% {
    display: none;
  }
}

Cela ne fonctionne pas, il vient se cache tout de suite, il ne restera pas à la valeur de 100%:

De l'utiliser comme ceci:

animation: infrontAnimation 1s 2s ease-out;

Donc ma question est, est-il possible de cacher quelque chose, mais seulement après une certaine animation est fini?

Pouvez-vous fournir avec un JSFiddle y compris le HTML?
Question: Est-ce de l'animation interactive, comme il y a une chose que déclencheur? Et il arrive plus d'une fois?
Oui c'est interactif, une classe serait les déclencher, j'ai trouvé ma solution, je ne peux pas marquer que le droit de réponse pour l'instant. Veuillez voir mon post @Michael
opacity:0->opacity:0->display:none; bien sûr, vous ne le verrez plus jamais, il est caché depuis le début 🙂
Oups, faute de frappe @GCyrillus!

OriginalL'auteur Shannon Hochkins | 2014-06-30

  1. 7

    Plutôt que de définir la hauteur ou la largeur d'un élément, j'ai trouvé une approche différente, qui pour moi, n'est-ce pas aussi pourris que de forcer la hauteur de 99,9%. Voici ce que j'ai trouvé:

    D'abord, Plutôt que d'utiliser display pour masquer & show, j'ai utilisé visibility, vu comme c'est toujours quelque chose qui peut interrompre notre animation et en fin de compte la cause de la panne, j'ai installé nos propriétés de transition dans un premier temps:

    Note: je vais garder les autres préfixes pour cette démo:

    .item {        
    transition: visibility 0s linear 0.7s, opacity 0.7s ease-in-out;
}

    Donc, ce que nous faisons, c'est le réglage de la transition de la visibilité de l'attribut à 0, mais le retarder par le temps qu'il faut pour compléter le fondu de sortie (opacité);

    Ainsi, lorsque nous voulons qu'elle soit visible, nous ajoutons à la classe de visilble:

    .item.visible {
    transition-delay: 0s;visibility: visible;opacity: 1;
}

    Nous avons donc de la configuration de notre retard à 0 ici afin que nous puissions remplacer l'état au moment de la transition, évidemment, nous ne voulons pas retarder la visibilité, nous voulons montrer que tout de suite et puis d'animer notre opacité;

    Puis, quand nous voulons nous cacher:

    .item.hidden {
    opacity: 0; visibility:hidden;
}

    Puis tout cela est fait, c'est la transition de nos opacité à 0 et la sortie de notre retard à 0,7, de sorte qu'il n'a pas fait " pour disparaître' dans les dom jusqu'à l'opacité a fini.

    De Travail, Exemple: VIOLON DÉMO

    J'espère que cela aide les autres téléspectateurs

    votre réponse semble bien, mais votre JSFiddle est trop compliqué pour un simple exemple de l'ajout d'un caché et le visible, classe, pourquoi est-il en utilisant des tas de style et de jQuery? Pour cette raison, pas beaucoup de gens seront en mesure de suivre votre exemple

    OriginalL'auteur Shannon Hochkins

  2. 4

    Poing de tous, j'ai créé un Violon de montrer ce qui peut être fait. Les barres rouges représentent d'autres contenus, comme du texte.
    Dire, si vous voulez cacher dans une voie d'abord qu'elle s'estompe, puis se rétrécit, vous pouvez utiliser

    @-webkit-keyframes infrontAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    height: 200px;
  }
  100% {
    opacity: 0;
    height: 0;
  }
}

@keyframes infrontAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    height: 200px;
  }
  100% {
    opacity: 0;
    height: 0;
  }
}

    animation: infrontAnimation 1s 2s forwards ease-out;
    -webkit-animation: infrontAnimation 1s 2s forwards ease-out;

    Noter que les deux @keyframes comme @-webkit-keyframessont utilisés.
    Si vous avez besoin de le cacher, sans rétrécissement de l'animation, vous pourriez utiliser ce

    @-webkit-keyframes infrontAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  99.9% {
    opacity: 0;
    height: 200px;
  }
  100% {
    opacity: 0;
    height: 0;
  }
}

@keyframes infrontAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  99.9% {
    opacity: 0;
    height: 200px;
  }
  100% {
    opacity: 0;
    height: 0;
  }
}
    C'est gentil, mais, j'ai trouvé une autre solution qui n'implique pas tout le magnétisme ou la modification des attributs de hauteur, voir mon post.
    c'est la meilleure réponse à la décoloration et la ou les réduire avec les Animations CSS. La décoloration avec CSS Transition est très bien, mais vous voulez utiliser cet exemple pour réduire la hauteur.
    Cette technique peut revenir à vous mordre si vous cachez quelque chose que vous ne voulez pas trouvé avec ctrl+F, que l'élément est toujours à l'écran, ou si l'un de vos utilisateurs utilisent la technologie d'assistance, que ce n'est pas accessible à l'amicale.

    OriginalL'auteur Gust van de Wal

  3. 0

    Vous devez définir animation-fill-mode: avec la valeur forwards de sorte qu'il se termine sur la dernière image de l'animation.

    Voir: http://dev.w3.org/csswg/css-animations/#animation-fill-mode

    OriginalL'auteur G-Cyr