Amazing Text Animation using Html and CSS

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

html,
body {
    display: grid;
    height: 100%;
    place-items: center;
    background-color: #212121;
}

.loader {
    color: rgb(254, 252, 252);
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 25px;
    box-sizing: content-box;
    height: 40px;
    padding: 10px 10px;
    display: flex;
    border-radius: 8px;
}

.words {
    overflow: hidden;
    position: relative;
}

.word {
    display: block;
    height: 100%;
    padding-left: 6px;
    color: #00d4fa;
    animation: animate 4s infinite;
}

@keyframes animate {
    10% {
        transform: translateY(-102%);
    }

    25% {
        transform: translateY(-100%);
    }

    35% {
        transform: translateY(-202%);
    }

    50% {
        transform: translateY(-200%);
    }

    60% {
        transform: translateY(-302%);
    }

    75% {
        transform: translateY(-300%);
    }

    85% {
        transform: translateY(-402%);
    }

    100% {
        transform: translateY(-400%);
    }
}