CSS fade in and out animation
CSS Fade Animation
In web design, animation effects are one of the important means to enhance user experience and page appeal. In many cases, we need to implement the fade-in and fade-out animation effects of elements on a web page. At this time, CSS can come in handy. CSS provides some properties and selectors that make the implementation of fade-in and fade-out animations very simple. This article will introduce in detail how to use CSS to implement fade-in and fade-out animation effects.
CSS opacity property
When creating fade-in and fade-out animations, we often use the CSS opacity property. The opacity property specifies the transparency of an element, with a value ranging from 0 (completely transparent) to 1 (completely opaque). By varying the transparency of an element, we can create a fade-in and fade-out animation effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fade in/out Animation</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f00;
opacity: 0;
transition: opacity 1s; /* Specifies that the animation effect lasts for 1 second */
}
.visible {
opacity: 1;
}
</style>
</head>
<body>
<div class="box"></div>
<button onclick="fadeIn()">Fade In</button>
<button onclick="fadeOut()">Fade Out</button>
<script>
const box = document.querySelector('.box');
function fadeIn() {
box.classList.add('visible');
}
function fadeOut() {
box.classList.remove('visible');
}
</script>
</body>
</html>
The above code implements a simple fade-in and fade-out animation effect. When the “Fade In” button is clicked, the .box element gradually transitions from completely transparent to opaque, creating a fade-in effect. When the “Fade Out” button is clicked, the .box element gradually transitions from opaque to completely transparent, creating a fade-out effect. The animation duration is 1 second, specified by the transition property.
CSS visibility property
In addition to using the opacity property to achieve fade-in and fade-out effects, we can also combine it with the visibility property. The visibility attribute is used to specify whether an element is visible. Its values are visible (visible) and hidden (hidden). By combining the opacity and visibility attributes, we can achieve more flexible animation effects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fade in/out Animation</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #00f;
opacity: 0;
visibility: hidden;
transition: opacity 1s, visibility 1s; /* Specify the animation effect duration as 1 second */
}
.visible {
opacity: 1;
visibility: visible;
}
</style>
</head>
<body> <div class="box"></div>
<button onclick="fadeIn()">Fade In</button>
<button onclick="fadeOut()">Fade Out</button>
<script>
const box = document.querySelector('.box');
function fadeIn() {
box.classList.add('visible');
}
function fadeOut() {
box.classList.remove('visible');
}
</script>
</body>
</html>
The above code is an example of using the opacity and visibility properties together. When the “Fade In” button is clicked, the .box element gradually transitions from fully transparent to opaque and becomes visible simultaneously. When the “Fade Out” button is clicked, the .box element gradually transitions from opaque to fully transparent and becomes hidden simultaneously. The animation duration is 1 second, specified by the transition property.
CSS Keyframes Animation
In addition to using the transition property to create simple fade-in and fade-out animations, we can also create more complex animations using the CSS @keyframes rule. The @keyframes rule allows us to specify keyframes for the animation, enabling a wider variety of animation effects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fade in/out Animation</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #0f0;
opacity: 0;
animation: fadeInOut 2s infinite; /* Specifies an animation duration of 2 seconds and an infinite loop */
}
@keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
The above code defines an animation called fadeInOut using the @keyframes rule. This animation specifies different opacities at 0%, 50%, and 100%, creating a looping fade-in and fade-out animation effect. The .box element will fade in and out according to the defined keyframe animation, with a duration of 2 seconds and an infinite loop.
Summary
Through this article, we learned how to use CSS to create fade-in and fade-out animation effects on web pages. From simple methods like the opacity and visibility attributes to more complex methods like the @keyframes rule, we can choose the right method to achieve different animation effects. Animation effects sometimes involve JavaScript, such as triggering an animation effect on a button click. This knowledge can be applied flexibly to enhance the user experience and interactive effects of your web pages.