Pourquoi mon animation slide-up utilisant CSS3 @keyframes ne fonctionne-t-elle pas ?

Transition CSS3 - Effet de fondu sortant

En utilisant CSS3, vous pouvez facilement implémenter des effets de fondu sortant pour améliorer l'expérience utilisateur. Toutefois, si vous rencontrez des problèmes avec les animations de diapositives qui ne fonctionnent pas, explorons les raisons.

Comprendre le problème

Vous essayez de créer une animation de diapositives en utilisant @keyframes. Cependant, l'animation n'a pas lieu. Pour déboguer cela, nous allons examiner le code que vous avez fourni.

<code class="css">.dummy-wrap {
  animation: slideup 2s;
}</code>

Ce code indique que la classe .dummy-wrap doit effectuer l'animation slideup pendant 2 secondes. Le bloc @keyframes définit les mouvements de l'animation :

<code class="css">@keyframes slideup {
  0% {top: 0px;}
  75% {top: 0px;}
  100% {top: -20px;}
}</code>

Dépannage de l'animation de la diapositive

En inspectant les images clés, nous remarquons que la position de l'élément ne change que dans les 25 dernières % de l'animation. Puisque l'élément commence en haut : 0px; et se termine en haut : -20px ;, il se déplacera essentiellement instantanément vers le haut : -20px;, ce qui entraînera un effet de « glissade vers le haut ».

Solution alternative pour le fondu sortant

Au lieu d'utiliser la traduction, vous pouvez utiliser l'opacité pour obtenir un effet de fondu. Voici comment la mettre en œuvre :

<code class="css">.hidden {
  opacity: 0;
  transition: opacity 2s;
}</code>

Cette technique réduit progressivement l'opacité de l'élément, créant un effet de fondu visible en 2 secondes.

Détails supplémentaires

Dans la version initiale de votre code, l'effet "slide-up" soudain était dû au fait que la position de l'élément n'était modifiée que dans les 25 derniers% de l'animation. En passant à l'opacité et en la faisant évoluer sur toute la durée, nous obtenons un effet de fondu fluide.

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!