CSS transition effect: how to achieve the fade-in and fade-out effect of elements

CSS transition effect: How to achieve the fade-in and fade-out effect of elements

Introduction:
In web design, making elements have transition effects is important to improve user experience One of the means. The fade-in-fade-out effect is a common and concise transition effect that can make elements appear from scratch, from shallow to deep. This article will introduce how to use CSS to achieve the fade-in and fade-out effect of elements, and give specific code examples.

1. Use the transition attribute to achieve the fade-in and fade-out effect of elements
The transition attribute of CSS can add a smooth transition effect to the element, so that the display and hiding of the element have an animated effect. Combined with the transparency attribute opacity, we can use the transition attribute to achieve the fade-in and fade-out effect of the element.

Code example:

.fade-in-out {
  opacity: 0; /* 初始时设置元素透明度为0 */
  transition: opacity 1s; /* 设置透明度过渡效果的时长为1秒 */
}

.fade-in-out:hover {
  opacity: 1; /* 鼠标悬停时设置元素透明度为1 */
}

Analysis:
The above code defines a CSS class named .fade-in-out. In the initial state, the transparency of elements of this class is set to 0, which is completely transparent. When the mouse hovers over the element, set the element's transparency to 1, which is completely opaque, achieving a fade-in effect. The transition attribute controls the transition effect of transparency to make the transition smooth. In this way, when the mouse leaves the element, the transparency will transition to 0 again, achieving a fade-out effect.

2. Use the animation attribute to achieve the fade-in and fade-out effect of the element
In addition to using the transition attribute, we can also use the animation attribute of CSS to achieve the fade-in and fade-out effect of the element. The animation attribute can define the animation effect of the element, including transition time, animation duration, animation effect, etc.

Code example:

.fade-in-out {
  animation: fadeinout 2s infinite; /* 设置动画属性，动画时长为2秒，无限循环 */
}

@keyframes fadeinout {
  0% { opacity: 0; } /* 动画起始时透明度为0 */
  50% { opacity: 1; } /* 动画中间时透明度为1 */
  100% { opacity: 0; } /* 动画结束时透明度为0 */
}

Analysis:
The above code defines a CSS class named .fade-in-out. Apply animation fadeinout to elements of this class through the animation attribute. The fadeinout animation contains three key frames, which are the start, middle and end states of the animation. In the initial state, the transparency of the element is 0, which is completely transparent. In the middle state of the animation, the transparency of the element is 1, which is completely opaque, achieving a fade-in effect. When the animation ends, the transparency of the element is set to 0 again, achieving a fade-out effect. By setting the animation duration to 2 seconds and an infinite loop, the element will cycle through the fade-in and fade-out animation effects.

Conclusion:
The above are two specific code examples of using CSS to achieve element fade-in and fade-out effects. By using the transition attribute or animation attribute, we can easily achieve a smooth transition effect of elements, adding dynamics and visual appeal to the web page. I hope the above content will be helpful to you and enable you to flexibly use the fade effect in web design.

The above is the detailed content of CSS transition effect: how to achieve the fade-in and fade-out effect of elements. For more information, please follow other related articles on the PHP Chinese website!