Comment puis-je animer les transitions CSS3 lors du chargement de la page sans JavaScript ?

Animations de transition CSS3 lors du chargement de la page sans JavaScript

Pouvez-vous appliquer des animations de transition CSS3 à une page Web lors du chargement sans utiliser JavaScript ?

Cette question a intrigué de nombreux développeurs Web, alors que les options disponibles apparaissent limité :

• CSS3 transition-delay offre un contrôle sur le délai des effets sur les éléments, mais il n'est applicable qu'aux événements de survol.
• CSS3 Keyframe fonctionne au chargement de la page, mais sa vitesse d'exécution est trop lente pour une utilisation pratique.
• Standard La La transition CSS3 est assez rapide mais ne déclenche pas d'animations au chargement de la page.

La solution : les images clés CSS3

N'ayez crainte, pour l'utilisation des images clés CSS3 fournit une solution viable pour réaliser des animations au chargement de la page. Examinons un exemple complet :

Animation coulissante du menu de navigation

En utilisant uniquement les images clés CSS3, nous pouvons créer un menu de navigation qui apparaît au chargement de la page :

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {
  animation: 1s ease-out 0s 1 slideInFromLeft;
  background: #333;
  padding: 30px;
}

<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>

Dans ce code, la règle @keyframes définit l'animation slideInFromLeft, qui déplace l'élément d'en-tête de 100 % hors écran à sa position normale. L'animation est appliquée à l'élément d'en-tête à l'aide de la propriété animation, avec des valeurs appropriées pour la durée, la fonction de synchronisation et le nombre d'itérations.

En utilisant des images clés CSS3, nous avons implémenté avec succès une animation CSS uniquement qui s'exécute sur la page. charger, offrant une expérience utilisateur transparente et engageante.

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!