Boucle d'animation CSS simple : fondu entrant et sortant du texte "Chargement"
Comment créer un infini boucle dans une animation CSS qui fait apparaître et disparaître le texte sans utiliser JavaScript ? Malgré tous nos efforts, le problème reste non résolu :
@keyframes flickerAnimation { /* flame pulses */ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } .animate-flicker { opacity:1; animation: flickerAnimation 1s infinite; }
Pour garantir la compatibilité entre les navigateurs, incluez les préfixes du fournisseur dans votre CSS :
@keyframes flickerAnimation { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-o-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes flickerAnimation{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } .animate-flicker { -webkit-animation: flickerAnimation 1s infinite; -moz-animation: flickerAnimation 1s infinite; -o-animation: flickerAnimation 1s infinite; animation: flickerAnimation 1s infinite; }
Utilisez le code mis à jour avec le HTML suivant :
<div class="animate-flicker">Loading...</div>
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!