How CSS achieves text fade-in effect

May 29, 2021 Article blog

When developing a Web page, the use of text fade-in effects is common, for example, when we mouse past a photo, the description of that photo fades in. S o how does CSS achieve text fade-in? This article w3cschool editor-in-chief tells you.

Let's first look at the results:

How CSS achieves text fade-in effect1

The implementation of the text fade-in effect requires two keyframes to be defined through CSS, one with opacity set to 1 and the other to 0, and the transparency property with opacity. W hen the animation type is ease, the fade-in effect is triggered. T his effect plays on its own each time the page loads. The fade-in time value can be set in the animation properties.

The animation-iteration-count style is used to animate the number of times. Animation-fill-mode: forwards are used to style to apply an element when the animation is not playing, and forward refers to the end property value of the element that is used after the animation ends.

Related code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淡入效果 - 编程狮(w3cschool.cn)</title>
	<style type="text/css"> 
        body { 
            animation: fadeInAnimation ease 3s; 
            animation-iteration-count: 1; /*设置动画播放次数*/
            animation-fill-mode: forwards; /*设置样式以在动画不播放时应用元素。forward是设置动画结束后，使用元素的结束属性值*/
        } 
        @keyframes fadeInAnimation { 
            0% { 
                opacity: 0; /*设置不透明度*/
            } 
            100% { 
                opacity: 1; 
            } 
        } 
    </style> 
</head>
<body>
	<h1 style="color: red"> 编程狮(w3cschool.cn)</h1> 
    <b> 页面加载时创建淡入效果</b>
</body>
</html>

That's all CSS does to achieve text fade-in effects. For more CSS content, follow w3cschool.com.

How CSS achieves text fade-in effect

Cookie Consent