CSS Text Rotating Animation

Hello coders, Today's tutorial is about CSS text animation. In this blog, we are going to learn about rotating text animation. Every website needs to have good fonts or typography for more user engagement. A good font attracts users, but bad typography drives them away. So choosing the right typography is very necessary. Again, without keeping the font static, we can give it various effects such as Shadows, text glow, or 3D effects. Or We can animate the text. In this blog, we have created a simple text animation. Follow the tutorial below to learn how to create this text animation. If you like the rest of the videos, you can subscribe to our YouTube Channel.

I hope you have seen the tutorial. This simple text effect or CSS animation example is easy to integrate into your project. Basic HTML and CSS were used to make this animation. We used CSS keyframes animation to make our animation happen. You can define keyframes to specify the values for the animating properties at various stages of the animation. In the CSS keyframes, Percentages are the percentage of the animation duration, 0% is the starting point, and 100% is the endpoint. We can define the speed of the animation when we set the animation property.

You May Also like:

CSS Text Rotating Animation [ Source Code ]:

Take the code from the box below and paste it into the document you just created. If you need the code you can download it from the button below. Adding your own ideas to it will make it even more exciting.

ADD HTML:

<!doctype html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>Pure CSS text rotating animation</title>
    <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="banner">
        <div class="content">
            <h2>I am a <span></span></h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas repellendus ut sed molestiae suscipit minus!</p>
            <a href="#">Learn More</a>
        </div>
    </div>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
.banner {
	background: url(1.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	height: 100vh;
}
.content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
}
.content h2 {
	padding: 0;
	color: #fff;
	font-size: 3em;
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
	text-align: left;
	font-family: 'Alfa Slab One', cursive;
	letter-spacing: 3px;
}
.content p {
	width: 40%;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	line-height: 1.9;
}
.content a {
	text-decoration: none;
	background: orangered;
	color: #fff;
	padding: 15px 35px;
	display: inline-block;
	margin-top: 20px;
	border-radius: 50px;
	font-family: 'Montserrat', sans-serif;
}
span:before {
	content: '';
	animation: wordChange infinite 8s;
	color: orangered;
}
@keyframes wordChange {
	0% {
		content: 'Photographer';
	}
	20% {
		content: 'Freelancer';
	}
	40% {
		content: 'Presenter';
	}
	60% {
		content: 'Designer';
	}
	80% {
		content: 'Developer';
	}
	100% {
		content: 'Businessman';
	}
}

I hope the code works for you. There are more code snippets for you to read when you click on the Load More Button below the website's Homepage. Code examples like this can help you learn something new. Thank you for visiting our website.

DOWNLOAD CODE

CSS Text Rotating Animation [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

CSS Text Rotating Animation

CSS Text Rotating Animation [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form