HOW TO CREATE TEXT CHANGING ANIMATION USING CSS

CREATE TEXT CHANGING ANIMATION USING CSS .

Today, We will learn text changing animation effect using HTML and CSS. This text animation effect is very easy to implement and it's very useful because you can add multiple words when you want to describe a product and a service.

In the section of html, we have div wrapper inside another div which contain all text and tag also have a span which will animate using CSS. Now, we have to add few lines of CSS to animate the structure. Basically we will give the structure a fixed height and overflow hidden. So all words will be hidden, then just move the inner content up and down to create this text animation effect.

Now Basic Steps to follow in CSS:

Step 1:

Do basic style like background-color, text-color, margins, padding etc.

Step 2:

Now, use to set the content of span to an initial word.

Step 3:

Use animation property to set the total time for the animation.

Step 4:

Now, use keyframes to change the content property that was set in before selector for each text frame.

It's like a slider but the best part is that you don't have to add any JavaScript, with just few lines of CSS and html you can create this nice animation.

index.html

<!DOCTYPE html>
        
        <!-- Created By Sagar Developer -- >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text changing Animation - Sagar Developer</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="wrapper">
        <div class="static_txt">I'm a</div>
        <ul class="dynamic_texts">
            <li><span>YouTuber</span></li>
            <li><span>Developer</span></li>
            <li><span>Freelancer</span></li>
            <li><span>Designer</span></li>
        </ul>
    </div>
</body>

</html>

style.css

<!DOCTYPE html>
        
        <!-- Created By Sagar Developer -- >

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: linear-gradient(45deg, #a581fa, #fd8a80);
}

.wrapper {
    display: inline-flex;
}

.wrapper .static_txt {
    color: #fff;
    font-size: 60px;
    font-weight: 400;
}

.wrapper .dynamic_texts {
    margin-left: 15px;
    line-height: 89px;
    height: 90px;
    overflow: hidden;
}

.dynamic_texts li {
    list-style: none;
    font-size: 60px;
    font-weight: 600;
    color: #fcc56d;
    position: relative;
    animation: slide 6s steps(4) infinite;
    top: 0;
}

.dynamic_texts li span {
    position: relative;
}

.dynamic_texts li span:after {
    content: '';
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    animation: typing 1.5s steps(10) infinite;
}

@keyframes typing {
    100% {
        left: 100%;
        margin: 0 -35px 0 35px;
    }
}

@keyframes slide {
    100% {
        top: -360px;
    }
}

Note:

Note: You can set the total time according to your need and you want to change text animation. In our Case, we have four words and we have used 0.3s or 1.5s as total time. You can use 2, 4, 5… so on. Setting time as multiple of the total number of words will ensure that each word gets displayed for an equal amount of time.

Sagar Developer

HOW TO CREATE TEXT CHANGING ANIMATION USING CSS | CSS EFFECTS |

CREATE TEXT CHANGING ANIMATION USING CSS .

Now Basic Steps to follow in CSS:

Step 1:

Step 2:

Step 3:

Step 4:

Note:

2/Post a Comment/Comments

Post a Comment

About Us

Contact Form

HOW TO CREATE TEXT CHANGING ANIMATION USING CSS | CSS EFFECTS |

CREATE TEXT CHANGING ANIMATION USING CSS .

Now Basic Steps to follow in CSS:

Step 1:

Step 2:

Step 3:

Step 4:

Note:

Related Posts

2/Post a Comment/Comments

Post a Comment

Contact Form