Les transitions ou animations CSS peuvent-elles créer un effet de fondu pour le texte lors du chargement de la page ?

Animer le fondu d'un paragraphe de texte lors du chargement de la page à l'aide de CSS

Question :

Les transitions CSS peuvent-elles être exploitées pour créer un effet de fondu pour un paragraphe de texte comme page charges ?

Explication :

Les transitions CSS permettent aux éléments de passer en douceur d'un style à un autre sur une période spécifiée. Cette propriété peut être appliquée à la propriété d'opacité, permettant un effet de fondu.

Méthode 1 : Animations CSS

Pour les transitions auto-invoquantes, les animations CSS sont plus adaptées. Ils fournissent une syntaxe d'animation dédiée spécialement conçue à cet effet.

#test p {
  margin-top: 25px;
  font-size: 21px;
  text-align: center;

  -webkit-animation: fadein 2s;
  -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Prise en charge des navigateurs :

• Tous les navigateurs modernes
• Internet Explorer 10

Méthode 2 : Transitions CSS avec classe Toggle

Alternativement, les transitions CSS peuvent être déclenchées à l'aide d'une bascule de classe :

#test p {
  opacity: 0;
  font-size: 21px;
  margin-top: 25px;
  text-align: center;

  transition: opacity 2s ease-in;
}

#test p.load {
  opacity: 1;
}

$("#test p").addClass("load");

Support du navigateur :

• Tous navigateurs modernes
• Internet Explorer 10

Méthode 3 : Animation à l'aide de jQuery

Pour une compatibilité entre navigateurs, jQuery peut être utilisé pour animer le changement d'opacité :

$("#test p").delay(1000).animate({ opacity: 1 }, 700);

. Méthode de messagerie :

[DotmailApp](http://dotmailapp.com/) utilise une méthode similaire avec un léger retard pour améliorer l'effet. La technique nécessite cependant jQuery 2.x avec une prise en charge plus large du navigateur.

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!