2020-05-28 - Comment utiliser CSS pour créer un effet de fondu au chargement de la page ?

Utilisez les propriétés d'animation et de transition pour créer un effet de fondu lors du chargement de la page à l'aide de CSS.

Méthode 1 : Utiliser les propriétés de l'animation CSS : L'animation CSS est définie par 2 images clés. L’un définit l’opacité sur 0 et l’autre définit l’opacité sur 1. Lorsque le type d’animation est défini sur facile, l’animation apparaît et disparaît en douceur sur la page.

Cet attribut s'applique à la balise body. Chaque fois que la page se charge, cette animation sera jouée et la page apparaîtra en fondu. Le temps de fondu entrant peut être défini dans l'attribut d'animation.

Le code est le suivant :

body {
animation : fadeInAnimation facilite 3s
animation-iteration-count : 1
animation-fill-mode : forwards ;
} @Keyframes Fadeinanimation {
0% {
Opacité : 0
}
100% {
Opacité : 1
}
} 🎜>

Exemple :