CSS Animation Tutorial: Teach you step-by-step to achieve the fade-in and fade-out effect

CSS Animation Tutorial: Teach you step-by-step to implement the fade-in and fade-out effect, including specific code examples

In web design and development, animation effects can make the page more vivid and attractive people. CSS animation is a simple and powerful way to achieve this effect. This article will teach you step by step how to use CSS to achieve the fade effect, and provide specific code examples for reference.

1. Fade-in effect
The fade-in effect refers to the effect in which an element gradually changes from a transparency of 0 to a transparency of 1. The following are the steps and code examples to achieve the fade-in effect:

Step 1: Add CSS style to the target element
First, we need to set an initial transparency of 0 for the target element to achieve the hidden effect. In CSS, use the opacity property to control the transparency of an element. Please look at the sample code below:

.fade-in {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

In the above code, we use .fade-in as the class name of the target element and set the opacity to 0. At the same time, use the transition attribute to define the transition effect of the change. Here we set a transition time of 1 second and use ease-in-out to specify the fade-in and fade-out animation effect.

Step 2: Use JavaScript to trigger the fade-in effect
Next, we need to use JavaScript to trigger the fade-in effect. Here is a simple sample code:

<script>
  window.onload = function() {
    document.getElementById("target-element").classList.add("fade-in");
  }
</script>

In the above code, we use the window.onload event to ensure that the document is fully loaded before executing the code. Then, use the getElementById method to get the target element, and use the classList.add method to add the .fade-in class name. In this way, the target element will gradually change from transparency 0 to transparency 1, achieving a fade-in effect.

2. Fade-out effect
The fade-out effect refers to the effect in which an element gradually changes from a transparency of 1 to a transparency of 0. The following are the steps and code examples to achieve the fade-out effect:

Step 1: Add CSS style to the target element
Similarly, we need to set an initial transparency of 1 for the target element to achieve the display effect. Please look at the sample code below:

.fade-out {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

In the above code, we use .fade-out as the class name of the target element and set the opacity to 1. Likewise, use the transition attribute to define changing transition effects. Here we set a transition time of 1 second and use ease-in-out to specify the fade-in and fade-out animation effect.

Step 2: Use JavaScript to trigger the fade-out effect
Similarly, we need to use JavaScript to trigger the fade-out effect. Here is a sample code:

<script>
  window.onload = function() {
    document.getElementById("target-element").classList.add("fade-out");
    setTimeout(function() {
      document.getElementById("target-element").style.display = "none";
    }, 1000);
  }
</script>

In the above code, we use the window.onload event to ensure that the document is fully loaded before executing the code. Then, use the getElementById method to get the target element and the classList.add method to add the .fade-out class name. In this way, the target element will gradually change from transparency 1 to transparency 0, achieving a fade-out effect. Finally, we hide the target element by setting the display attribute to "none".

Summary:
Through the above examples, we learned how to use CSS and JavaScript to achieve the fade effect. This is a very basic and practical skill that can be applied to a variety of web design and development projects. Hope this article is helpful to everyone!

The above is the detailed content of CSS Animation Tutorial: Teach you step-by-step to achieve the fade-in and fade-out effect. For more information, please follow other related articles on the PHP Chinese website!