我正在嘗試使用html和css創建附加的動畫，重新制作的步驟是，當我懸停文本時，它似乎是一個新的文本來自頂部，當我停止懸停時，它似乎是相同的舊文本來自底部。

我的努力是在附加的JS Bin鏈接，我能夠實現的第一部分，它似乎是從頂部的文本，但第二部分，當用戶停止懸停是我仍然在與它斗爭將是可怕的，如果有人能幫助我在這里感謝！。

https://jsbin.com/kuqoroqire/1/edit? html，css，輸出

// Please follow JS Bin for code.

如果是同樣的文字，文字陰影可以做到這一點。我寫了一篇關于這種技術的詳細文章:https://CSS-tricks . com/cool-hover-effects-that-use-CSS-text-shadow/

.hover {
  line-height: 1.2em;
  color: #0000;
  text-shadow: 
    0 0 #000, 
    0 -1.2em #1095c1;
  overflow: hidden;
  transition: .3s;
}
.hover:hover {
  text-shadow: 
    0 1.2em #000, 
    0 0 #1095c1;
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
}
h3 {
  font-family: system-ui, sans-serif;
  font-size: 3rem;
  margin:0;
  cursor: pointer;
  padding: 0 .1em;
}

<h3 class="hover">Hover Me</h3>