Comment obtenir un effet de fondu en CSS3 : animations d'images clés et transitions ?

Transition CSS3 - Effet de fondu sortant

En CSS3, l'obtention d'un effet de fondu peut être obtenue grâce à l'utilisation d'animations d'images clés. Cependant, il est important de s'assurer que les paramètres d'animation sont correctement configurés pour obtenir l'effet souhaité.

Dans le code fourni, l'animation slideup ne fonctionne pas car la propriété top est animée, ce qui déplacerait l'élément verticalement. hors de la page. Pour obtenir un effet de fondu, la propriété d'opacité doit plutôt être animée. Voici une version mise à jour du code :

<code class="css">@keyframes slideup {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.dummy-wrap {
  animation: slideup 2s;
  -moz-animation: slideup 2s;
  -webkit-animation: slideup 2s;
  -o-animation: slideup 2s;
}</code>

Alternativement, une approche plus concise utilisant des transitions CSS3 est disponible :

<code class="css">.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}</code>

Pour faire disparaître un élément en utilisant cette approche, ajoutez simplement la classe cachée à l'élément :

<code class="css"><div class="success-wrap successfully-saved visible">Saved</div></code>

Cela fera passer l'élément à l'opacité : 0 sur 2 secondes, créant un effet de fondu. Notez que visibilité : caché est ajouté avec un délai, permettant à l'animation de fondu de se terminer avant que l'élément ne soit masqué.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!