JSFiddle - React, Tailwind, and code Playground

by Юрий Литвиненко

HTML

<div class="text-center">
   <div class="vk">
     <a href="https://vk.com/deadshumz" class="vkimg">VK</a>
     <a href="https://vk.com/deadshumz" class="vklink">vk.com/deadshumz</a>
   </div>
   <br>
 </div>

CSS

.text-center {
    text-align: center;
}

.vk {
    height: 30px;
    overflow: hidden;
    display: inline-flex;
}

.vk .vklink {
    font-size: 18px;
    display: inline-block;
    overflow: hidden;
    width: 0;
}

.vk:hover .vklink {
    animation: typing 1s forwards;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}