Comment puis-je créer un effet de clignotement avec CSS3 sans JavaScript ni transitions ?

Animation de clignotement sans transitions à l'aide de CSS3

Question :

Le texte peut-il clignoter sans utiliser de JavaScript ou de décoration de texte, imitant le classique tag sans transitions continues ?

Réponse :

Le la balise dans les anciens navigateurs avait un cycle de service de 80 %, ce qui signifie qu'elle était visible 80 % du temps et masquée pendant 20 %. Voici une solution CSS qui reproduit fidèlement ce comportement, affectant uniquement le texte :

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

Utilisation :

This is <span class="blink">blinking</span> text.

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!