Simple Text Rotate CSS Animation

 

Hello Guys. Today I will share a simple CSS animation snippet based on creating text rotating animation using HTML and CSS. Previously I have shared a snippet on animated typewriter text animation using jquery. Check that out if you want. In this project, I have used plain HTML and CSS to create this snippet.

I have taken a div element named 'banner-area in the HTML markup,' which I used to give the snippet a background image. Then I have taken another div element named 'wrapper,' which will act as the features' container. After taking a random name in the h2 tag, I took another div element called 'banner-text' inside. I used an unordered list named 'text-content' and took four li elements and gave them a common name 'content.' I placed some random text as a designation.

You may also like:

• Animated Search Bar HTML CSS
• Drop Down Menu using HTML and CSS

In the CSS part, I first gave a background image to make the div element and gave the 'banner-area' a height of 100vh. After that, I gave it a whitish overlay using CSS pseudo-element. Then I took the main text wrapper in the middle by providing the 'wrapper' div a position absolute and CSS transform translate property. After that, I have used CSS keyframes animation for the text animation. For the text to rotate one after another, I used CSS transform translated3d property.

For creating the animation, you have to make two files. One is HTML, and the other is CSS. Please copy the code below and paste it to the individual files and save them. Run the HTML file to your browser and modify it according to your need.

HTML

<div class="banner-area"> <div class="wrapper"> <h2>Carolina Jones </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>


CSS

body { padding: 0; margin: 0; } .banner-area{ background-image: url(https://i.postimg.cc/V6qv3NDd/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: poppins; 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: darkorange; } @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); } }

Thanks for visiting the website, and please follow our social media profiles to keep yourself updated for future posts.