Simple Text Animation using HTML and CSS ( Source code )

Simple Text Animation using HTML and CSS ( Source code )

HTML

<div class="wrapper">
    <h1 class="banner-text">
</h1>
</div>

CSS

body {
            margin: 0;
            font-family: BigNoodleTitling;
        }

        .wrapper {
            background-color: #F863A6;
            height: 100vh;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }


        .banner-text {
            animation: pulse 5s infinite;
            font-size: 100px;
            letter-spacing: 2px;
        }

        @keyframes pulse {
            0% {
                color: #F863A6;
            }
            10% {
                color: #F863A6;
            }
            30% {
                color: #fff;
            }
            50% {
                color: #F863A6;
            }
            60% {
                color: #F863A6;
            }
            80% {
                color: #fff;
            }
            100% {
                color: #F863A6;
            }
        }

        .banner-text:after {
            content: "";
            animation: spin 5s linear infinite;
        }

        @keyframes spin {
            0% { content:"Divinector"; }
            100% { content:"Front-End Tutorial"; }
        }