How to use pure CSS to achieve text fade-in animation effect (source code attached)-CSS Tutorial-php.cn

The content of this article is about how to use pure CSS to achieve the fade-in animation effect of text (source code attached). It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. helped.

Effect preview

How to use pure CSS to achieve text fade-in animation effect (source code attached)

Source code download

https://github.com/comehope/front- end-daily-challenges

Code Interpretation

Define dom, the container contains several sub-elements, each sub-element is 1 letter:

 h a p p y   h o l i d a y s

Copy after login

Centered display:

body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(pink, white, pink); }

Copy after login

Set the font style:

.container span { display: inline-block; color: purple; font-weight: bold; text-transform: uppercase; font-size: 40px; }

Copy after login

Define the movement effect of text from left to right:

.container span { animation: sideSlide 4s forwards infinite; transform: translateX(-100vw); } @keyframes sideSlide { 15%, 20% { transform: translateX(0.5em); } 24% { transform: translateX(0); } 25%, 75% { transform: translateX(0); } 90%, 100% { transform: translateX(100vw); } }

Copy after login

Increase the animation effect of text scaling:

.container span { transform: translateX(-100vw) scale(0); } @keyframes sideSlide { 15%, 20% { transform: translateX(0.5em) scale(1); } 24% { transform: translateX(0) scale(1.2); } 25%, 75% { transform: translateX(0) scale(1); } 90%, 100% { transform: translateX(100vw) scale(0); } }

Copy after login

Add text entry And the fade-in and fade-out effect when appearing:

.container span { filter: opacity(0); } @keyframes sideSlide { 15%, 20% { transform: translateX(0.5em) scale(1); } 24% { transform: translateX(0) scale(1.2); } 25%, 75% { transform: translateX(0) scale(1); filter: opacity(1); } 90%, 100% { transform: translateX(100vw) scale(0); filter: opacity(0); } }

Copy after login

Increase the effect of text color change:

@keyframes sideSlide { 15%, 20% { transform: translateX(0.5em) scale(1); color: purple; } 24% { transform: translateX(0) scale(1.2); color: cyan; } 25%, 75% { transform: translateX(0) scale(1); filter: opacity(1); color: purple; } 90%, 100% { transform: translateX(100vw) scale(0); filter: opacity(0); } }

Copy after login

Set the subscript variable of the sub-element:

.container span:nth-child(1) { --n: 1; } .container span:nth-child(2) { --n: 2; } .container span:nth-child(3) { --n: 3; } .container span:nth-child(4) { --n: 4; } .container span:nth-child(5) { --n: 5; } .container span:nth-child(6) { --n: 6; } .container span:nth-child(7) { --n: 7; } .container span:nth-child(8) { --n: 8; } .container span:nth-child(9) { --n: 9; } .container span:nth-child(10) { --n: 10; } .container span:nth-child(11) { --n: 11; } .container span:nth-child(12) { --n: 12; } .container span:nth-child(13) { --n: 13; } .container span:nth-child(14) { --n: 14; }

Copy after login

Set the animation delay of the sub-element :

.container span { animation-delay: calc((var(--n) - 1) * 0.05s); }

Copy after login

Done!

The above is the detailed content of How to use pure CSS to achieve text fade-in animation effect (source code attached). For more information, please follow other related articles on the PHP Chinese website!