SOURCE

const element = document.getElementById('title');
const topLetter = document.querySelectorAll('.box1')
const bottomLetter = document.querySelectorAll('.box2')
// 绑定鼠标移入事件
element.addEventListener('mouseenter', function () {
    for (var i = 0; i < topLetter.length; i++) {
        topLetter[i].style.animation = 'top .5s calc(var(--i) * .05s)  linear forwards'
    }
    for (var i = 0; i < bottomLetter.length; i++) {
        bottomLetter[i].style.animation = 'bottom .5s calc(var(--i) * .05s)  linear forwards'
    }
});

// 绑定鼠标移出事件
element.addEventListener('mouseleave', function () {
    for (var i = 0; i < topLetter.length; i++) {
        topLetter[i].style.animation = 'top2 .5s calc(var(--i) * .05s)  linear  forwards'
    }
    for (var i = 0; i < bottomLetter.length; i++) {
        bottomLetter[i].style.animation = 'bottom2 .5s calc(var(--i) * .05s)  linear forwards'
    }
});

<div id='title' style="position:relative">

<span class="text text--origin">
	<span class="letter box1" style="--i: 0;">E</span>
    <span class="letter box1" style="--i: 1;">a</span>
    <span class="letter box1" style="--i: 2;">s</span>
    <span class="letter box1" style="--i: 3;">t</span>
    <span class="letter box1" style="--i: 4;">e</span>
    <span class="letter box1" style="--i: 5;">r</span>
    <span class="letter box1" style="--i: 6;">n</span>
    <span class="letter box1" style="--i: 7;"> </span>
    <span class="letter box1" style="--i: 8;">W</span>
    <span class="letter box1" style="--i: 9;">i</span>
    <span class="letter box1" style="--i: 10;">s</span>
    <span class="letter box1" style="--i: 11;">d</span>
    <span class="letter box1" style="--i: 12;">o</span>
    <span class="letter box1" style="--i: 13;">m</span>
    </span>
<div class="text text--clone">
	<span class="letter box2" style="--i: 0;">E</span>
    <span class="letter box2" style="--i: 1;">a</span>
    <span class="letter box2" style="--i: 2;">s</span>
    <span class="letter box2" style="--i: 3;">t</span>
    <span class="letter box2" style="--i: 4;">e</span>
    <span class="letter box2" style="--i: 5;">r</span>
    <span class="letter box2" style="--i: 6;">n</span>
    <span class="letter box2" style="--i: 7;"> </span>
    <span class="letter box2" style="--i: 8;">W</span>
    <span class="letter box2" style="--i: 9;">i</span>
    <span class="letter box2" style="--i: 10;">s</span>
    <span class="letter box2" style="--i: 11;">d</span>
    <span class="letter box2" style="--i: 12;">o</span>
    <span class="letter box2" style="--i: 13;">m</span>
    </div>
</div>

.text--origin {
    display: inline-block;
    overflow: hidden;
    perspective: 1000px;
    perspective-origin: -150% 50%;
    vertical-align: middle;
    width: 100%;
}

.text--clone,
.text--origin {
    display: inline-block;
    overflow: hidden;
    perspective: 1000px;
    perspective-origin: -150% 50%;
    vertical-align: middle;
    width: 100%;
    cursor: pointer;
}

.text--clone .letter,
.text--origin .letter {
    display: inline-block;
    transform-origin: 0 0;
    will-change: transform;
    font-size: 40px;
    font-weight: bold
}

.text--clone .letter {
    transform: translate(0px, 110%) rotateX(-90deg);
}

.text--clone {
    bottom: 0;
    color: #333;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.box1 {
    animation: top .5s calc(var(--i) * .05s) linear forward;
}

@keyframes top {
    0% {
        transform: translate(0px, 0%) rotateX(0deg);
    }
    100% {
        transform: translate(0px, -100%) rotateX(90deg);
    }
}

@keyframes top2 {
    0% {
        transform: translate(0px, -100%) rotateX(90deg);
    }
    100% {
        transform: translate(0px, 0%) rotateX(0deg);
    }
}

@keyframes bottom {
    0% {
        transform: translate(0px, -100%) rotateX(90deg);
    }
    100% {
        transform: translate(0px, 0%) rotateX(0deg);
    }
}

@keyframes bottom2 {
    0% {
        transform: translate(0px, 0%) rotateX(0deg);
    }
    100% {
        transform: translate(0px, -100%) rotateX(90deg);
    }
}