How Can I Animate CSS3 Transitions on Page Load Without JavaScript?

CSS3 Transition Animations on Page Load Without JavaScript

Can you apply CSS3 transition animations to a web page upon loading without employing JavaScript?

This question has puzzled many web developers, as the options at hand appear limited:

• CSS3 transition-delay offers control over the delay of effects on elements, but it is only applicable to hover events.
• CSS3 Keyframe does work on page load, but its execution speed is too slow for practical use.
• Standard CSS3 transition is fast enough but doesn't trigger animations on page load.

The Solution: CSS3 Keyframes

Fear not, for using CSS3 Keyframes provides a viable solution for achieving animations on page load. Let's delve into a comprehensive example:

Navigation Menu Slide-In Animation

Using CSS3 Keyframes solely, we can create a navigation menu that slides into view upon page load:

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

In this code, the @keyframes rule defines the slideInFromLeft animation, which shifts the header element from 100% off-screen to its normal position. The animation is applied to the header element using the animation property, with appropriate values for duration, timing function, and iteration count.

By utilizing CSS3 Keyframes, we have successfully implemented a CSS-only animation that executes on page load, providing a seamless and engaging user experience.

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