Can CSS3 Transitions Animate on Page Load Without JavaScript?

Can CSS3 Transition Animations Run on Page Load Without JavaScript?

It is indeed possible to initiate CSS3 transition animations upon page load without requiring JavaScript. The solution lies in utilizing CSS3 Keyframes.

Implementing a Sliding Animation with CSS3 Keyframes

Let's demonstrate how to employ CSS3 Keyframes to achieve a navigation menu sliding into view upon page load:

@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>

Upon page load, the navigation menu will smoothly slide into view from the left-hand side. This effect is achieved solely through CSS3 and requires no JavaScript intervention.

The above is the detailed content of Can CSS3 Transitions Animate on Page Load Without JavaScript?. For more information, please follow other related articles on the PHP Chinese website!