How to using css3 transition animation on load

3个答案

To use CSS3 transition animations during page loading, follow these steps:

Define CSS transition rules: In CSS, define initial states and transition effects for target elements. For example, you might want an element to transition from opacity 0 to opacity 1 for a fade-in effect.
Set the initial state: Apply styles to the target element using the <style> tag or an external CSS file to set its initial state (e.g., opacity: 0;).
Set transition effects: Use the transition property to define the duration and timing function of the transition.
Trigger the transition: During page loading, use JavaScript or add a class to the DOM to change the target element's state and trigger the CSS transition.

Here is a simple example:

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Load Transition Example</title>
<style>
/* Initial state: element is invisible */
.element {
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

/* State after page load: element becomes visible */
.element.loaded {
  opacity: 1;
}
</style>
</head>
<body>
<div class="element">Hello, World!</div>

<script>
window.addEventListener('DOMContentLoaded', (event) => {
  // Once the DOM is fully loaded, add 'loaded' class to trigger transition
  document.querySelector('.element').classList.add('loaded');
});
</script>
</body>
</html>

In this example, the .element has an initial state of being invisible (opacity: 0;). When the DOMContentLoaded event is triggered (i.e., when the HTML document is fully loaded and parsed, but not necessarily when stylesheets, images, or subframes are loaded), JavaScript adds the loaded class to .element, triggering a 2-second fade-in effect that transitions the element from fully transparent to fully opaque (opacity: 1;).

Note that in actual development, you often need to consider browser compatibility and handling cases where JavaScript cannot be executed. Additionally, transition effects can impact performance, especially when dealing with numerous elements or complex animations.

2024年6月29日 12:07 回复

CSS Animation Delays for Only 3 Seconds

Here are a few important points to consider:

Animating Multiple Animations Simultaneously
We create a "wait" animation that merely delays the actual animation (in our example, the second animation).

Code:

css
header {
    animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}

@keyframes wait {
    from { transform: translateY(20px); }
    to { transform: translateY(20px); }
}

@keyframes slideInFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

2024年6月29日 12:07 回复

You can apply CSS animations during page loading without any JavaScript; you only need to use CSS3 keyframes.

Example

Here is a demonstration of a navigation menu that slides into place using only CSS3:

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

header {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Added for aesthetics */ 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>

Explanation

The critical component is the keyframe animation, which we define as slideInFromLeft:

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

This essentially means that at the start, the header is positioned off-screen to the left edge by its full width, and at the end, it is positioned correctly.

The next section invokes the slideInFromLeft animation:

shell
animation: 1s ease-out 0s 1 slideInFromLeft;

This is a shorthand version; for clarity, here is the detailed breakdown:

shell
animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */

This is the W3C specification.

2024年6月29日 12:07 回复

How to using css3 transition animation on load

3个答案

Example

Explanation

你的答案