Simple Text Rotate CSS Animation

byCodingFlicks -September 18, 2020

0

Today we live in an era of very short attention spans. For this reason, the role of any kind of animation in capturing focus quickly in the world of web design is undeniable. Among these, text animation is one through which the attention of the users can be attracted. Today we will create a text rotating animation using HTML and CSS. Previously, we have shared many snippets on CSS animation, website design, JavaScript animation, etc. The method of creating today's snippet is shown in the video tutorial below.

Video Tutorial:

Text animation is very important in modern web design. It helps to attract attention, increases user experience, and converts more visitors. Other important aspects of text animation include improving visual appeal, guiding user focus, communicating emotion and brand identity, distinguishing from competitors, and improving storytelling.

In this project, we took a div element called 'banner-area' in the HTML markup. We used this div to give the snippet a background image. Then we took another div element called 'wrapper', which will act as a container for the content. After taking a random name in the h2 tag, we took another div element called 'banner-text' inside. We used an unordered list called 'text-content' and took four li elements and gave them a common name 'content'. We placed some random text as the title.

You may also like:

In the CSS part, we first gave a background image to the div element and gave the 'banner-area' a height of 100vh. Next, we gave it a white overlay using CSS pseudo-elements. Then we moved the main text wrapper to the middle by giving the 'wrapper' div a position absolute and the CSS transform translate property. Next, we used CSS keyframe animation to animate the text. To rotate the text one by one, we used the CSS transform translation3d property to get the effect we needed.

Text Rotate CSS Animation [ Source Code ]:

To create this CSS animation snippet, we need to create two files. One is HTML, and the other is CSS. Please copy the code below and paste it into your files and save them. Run the HTML file in your browser and modify it as per your requirements. If any of you want to download the code, you can do so by clicking the download button below this blog post.

HTML

  <!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->	
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to create Text Rotate Animation using HTML and CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="banner-area">
		<div class="wrapper">
			<h2>Jack Miller</h2>
			<div class="banner-text">
				<ul class="text-content">
					<li class="content">Web Designer</li>
					<li class="content">Philanthropist</li>
					<li class="content">UI / UX Designer</li>
					<li class="content">Graphics Designer</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

CSS

  body {
	padding: 0; 
	margin: 0;
}
.banner-area {
	background-image: url(2.jpg);
	background-size: cover;
	background-position: center center;
	height: 100vh;
	position: relative;
}
.banner-area::before {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.7);
}
.wrapper h2 {
	margin: 0;
	text-align: center;
	padding-bottom: 35px;
	font-family: montserrat;
	text-transform: uppercase;
}
.wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	height: 160px;
	overflow: hidden;
	font-size: 35px;
	line-height: 40px;
	color: #262626;
	font-family: roboto;
}
.banner-text {
	font-weight: 600;
	overflow: hidden;
	height: 40px;
	padding: 0 40px;
}
.text-content {
	margin-top: 0;
	padding-left: 0;
	text-align: center;
	list-style: none;
	animation: animate 10s infinite;
}
.content {
	line-height: 40px;
	margin: 0;
	color: deeppink;
	font-weight: 300;
}
@keyframes animate {
	0%, 12.66%, 100% {
		transform: translate3d(0, 0, 0);
	}
	16.66%, 29.32% {
		transform: translate3d(0, -25%, 0);
	}
	33.32%, 45.98% {
		transform: translate3d(0, -50%, 0);
	}
	49.98%, 62.64% {
		transform: translate3d(0, -75%, 0);
	}
	66.64%, 79.3% {
		transform: translate3d(0, -50%, 0);
	}
	83.3%, 95.96% {
		transform: translate3d(0, -25%, 0);
	}
}

Text animation is a powerful tool in modern web design. If we can use text animation thoughtfully in our website or app then we can create a visually appealing, engaging, and user-friendly experience. Hope you have collected the code. To get more codes like this, click on the download button at the bottom of our homepage. Thank you for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.