Are you looking to add some visual interest and movement to your website? One way to do this is through CSS text animation. CSS text animation allows you to animate the text on your website in a variety of ways. You can make it fade in and out, move across the screen, or even change colors. This can add some fun and dynamic elements to your website and engage your visitors.
We have used Background image, background position, & background clip property. Background image has the blue & white stripes.
The background image is created with the help of Figma.
Preview (CSS Text Animation)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure CSS text animation</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>
HELLO<BR />WORLD
</h1>
</body>
</html>CSS
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #1A1500;
color: white;
}
h1 {
font-size: 3em;
letter-spacing: 1px;
font-weight: bold;
font-family: 'Montserrat', sans-serif;
background: url('./abc.png');
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: text 7.5s linear infinite;
}
@keyframes text {
from {
background-position: 0% 50%;
}
to {
background-position: 100% 50%;
}
}Here is the GitHub repository link of the code. Open Source Contribution are welcomed.
CSS text animation can add some fun and excitement to your website. It can make your text stand out and engage your visitors. With a little bit of code, you can create a wide range of text animation effects to enhance your website.
You can read our other blogs here:
Thank you for reading. Happy Coding 🥰
