Les transitions CSS3 peuvent-elles s'animer lors du chargement de la page sans JavaScript ?

Les animations de transition CSS3 peuvent-elles s'exécuter lors du chargement de la page sans JavaScript ?

Il est en effet possible de lancer des animations de transition CSS3 lors du chargement de la page sans nécessiter JavaScript. . La solution réside dans l'utilisation d'images clés CSS3.

Implémentation d'une animation coulissante avec des images clés CSS3

Montrons comment utiliser des images clés CSS3 pour obtenir un menu de navigation glissant sur la page. chargement :

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

header {  
  /* Invoking the 'slideInFromLeft' animation */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Aesthetic enhancements */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}

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

Lors du chargement de la page, le menu de navigation apparaîtra en douceur du côté gauche. Cet effet est obtenu uniquement via CSS3 et ne nécessite aucune intervention JavaScript.

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!