* {
    margin: 0;
    padding: 0;
}
body {
    width: 100%;
    height: 100vh;
    display: grid;
    place-content: center;
    background: -webkit-linear-gradient(top, #ffa5a5 0%, #ffd3d3 100%);
}

   <input type="checkbox" id="love">
   <label for="love">❤️</label>
   <p class="typing-demo">5️⃣2️⃣0️⃣💌</p>

[type="checkbox"] {
    display: none;
}
[for="love"] {
    cursor: pointer;
    font-size: 5em;
    text-align: center;
    animation: 1s ease-in-out infinite love;
}

@keyframes love {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(2);
    }
    100% {
        transform: scale(1);
    }
}

p {
    display: none;
    margin-block-start: 3rem;
    width: min(30ch, 50%);
}
#love:checked ~ p {
    display: block;
}

.typing-demo {
    width: 11ch;
    animation: typing 2s steps(22), blink 0.5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 3rem;
}
@keyframes typing {
    from {
        width: 0;
    }
}
@keyframes blink {
    50% {
        border-color: transparent;
    }
}