Comment créer un texte clignotant qui s'estompe doucement avec CSS3 ?

Texte clignotant rendu sans effort avec CSS 3

Question :

Comment puis-je créer un clignotement texte qui disparaît progressivement puis réapparaît, plutôt que simplement disparaître et réapparaître instantanément ?

Réponse :

Pour obtenir cet effet, vous devez définir l'opacité sur 0 à 50 % dans la définition des images clés de l'animation. Cela garantira que le texte disparaît progressivement puis réapparaît pendant le cycle d'animation.

Modification du code :

Auparavant, le code était :

@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

Pour résoudre le problème, remplacez-le par :

@-webkit-keyframes blinker {
  50% {
    opacity: 0;
  }
}

Cette modification entraînera la disparition du texte à 50 % de la durée de l'animation, puis revient progressivement pendant les 50 % restants.

Démo :

<div>

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

Et voilà ! Texte clignotant avec effet de fondu entrant et sortant fluide, tout cela grâce aux capacités d'animation de CSS 3.

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!