Comment créer un effet de fondu en HTML et CSS ?

Réponses rédigées par Antoine

Dernière mise à jour : 2020-06-01 13:16:21

Question

Comment puis-je créer un effet de fondu sur une page HTML en CSS ?

Réponse

Vous pouvez utiliser la propriété CSS animation pour créer un effet de fondu en HTML et CSS.

Cette propriété peut être appliquée à la balise <body>, et chaque fois que la page HTML se charge, cette animation est lue et la page apparaît en fondu. La durée du fondu peut être définie via la propriété animation.

Voici un exemple pour créer un effet de fondu en HTML et CSS lors du chargement d'une page :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8">
<title>Comment créer un effet de fondu en HTML et CSS ?</title> 
<style> 
body { 
animation: fadeInAnimation ease 4s; 
animation-fill-mode: forwards; 
animation-iteration-count: 1; 
} 
@keyframes fadeInAnimation { 
0% { 
opacity: 0; 
} 
100% { 
opacity: 1; 
} 
} 
</style> 
</head>
<body> 
<h1 style="color: black">1FORMATIK.com</h1> 
</body>
</html>