Maison > interface Web > tutoriel CSS > Voici quelques titres de style question qui correspondent au contenu que vous fournissez : * Boucle d'animation CSS : comment faire apparaître et disparaître du texte à l'infini sans JavaScript ? * Création d'une boucle de fondu infini pour le texte dans CS

Voici quelques titres de style question qui correspondent au contenu que vous fournissez : * Boucle d'animation CSS : comment faire apparaître et disparaître du texte à l'infini sans JavaScript ? * Création d'une boucle de fondu infini pour le texte dans CS

DDD
Libérer: 2024-10-26 12:54:29
original
1068 Les gens l'ont consulté

Here are a few question-style titles that fit your provided content:

* CSS Animation Loop: How to Fade Text In and Out Infinitely without JavaScript?
* Creating an Infinite Fading Loop for Text in CSS: Solving the Compatibility Issue
* Making Text

Boucle d'animation CSS simple : fondu entrant et sortant du texte "Chargement"

Question

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;
}
Copier après la connexion

Réponse

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;
}
Copier après la connexion

Utilisez le code mis à jour avec le HTML suivant :

<div class="animate-flicker">Loading...</div>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal