How Gradually Change Text Color And Size CSS Animation

Posted By Bajarangi soft , Posted On 27-11-2020

Using css animation we can change font size, color, bold automatically .so today we discuss how to do it.

How Gradually Change Text Color And Size CSS Animation

Complete Code For Gradually Changing Text Color And Size CSS Animation.

<!DOCTYPE html>
<html>
<head>
    <title>How Gradually Change Text Color And Size CSS Animation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>

<style>
    * {
        box-sizing: border-box;
    }

    body {
        background-color: #666699;
    }
    #myDIV {
        width: 400px;
        height: 100px;
        animation: mymove 5s infinite;
        color: #cc0000;
    }

    @keyframes mymove {
        25%{
            font: 20px bold;
            color: #3399ff;
        }
        50% {
            font-weight: bold;
            font-size: 40px;
            color: #99cc00;
        }
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: white;">Gradually Change Text Color And Size CSS Animation</h1>
    </div>
    <div class="well">
        <div id="myDIV">
            <p>This is a paragraph</p>
        </div>
    </div>
</div>
</body>
</html>