Comment puis-je créer un texte clignotant bidirectionnel avec CSS3 ?

Obtention d'un texte clignotant bidirectionnel avec CSS 3

Votre code actuel, @-webkit-keyframes clignotant {...}, donne un résultat unidirectionnel clignotement de l'élément de texte. Pour obtenir un effet bidirectionnel, où le texte apparaît et disparaît en fondu, ajustez les images clés de l'animation comme suit :

.waitingForConnection {
-webkit-animation-name: clignotant;
-webkit-animation -itération-count : infini ;
-webkit-animation-timing-function : cubique-bezier(.5, 0, 1, 1);
-webkit-animation-duration : 1,7 s;
}

@-webkit-keyframes clignotant {
de { opacité : 1,0 ; >
50% { opacité : 0 ; >
à { opacité : 1,0 ; 🎜>>

Cet ajustement définit l'opacité de 1,0 à 0 à la marque 50 %, atténuant ainsi le texte. L'animation rétablit ensuite l'opacité à 1,0, créant l'effet de clignotement bidirectionnel souhaité. L'intervalle et la durée de clignotement peuvent être personnalisés en ajustant les valeurs dans la règle @-webkit-keyframes.

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!