javascript - 如何在悬停时用关键帧动画文本替换文本？

Question

当鼠标悬停时，关键帧动画播放正常......虽然原始文本没有消失。

据我所知，我已尝试创建悬停关键帧动画，但现在卡住了(这是否更好地使用 javascript？)。

.name:hover::after {
  content: "";
  animation: descriptionChange 3s linear infinite alternate;
}

@keyframes descriptionChange {
  0% {}
  10% {
    content: "Lorem";
  }
  20% {
    content: "delibus";
  }
  30% {
    content: "faccae";
  }
  40% {
    content: "repratia";
  }
  50% {
    content: "enviroments";
  }
  60% {
    content: "itation";
  }
  70% {
    content: "alique";
  }
  80% {
    content: "nuscitatiis";
  }
  90% {
    content: "quis";
  }
}

<span class="name">description</span> <br>

预期结果:• 描述文字可见• 将鼠标悬停在描述文本上以激活关键帧动画• 描述文字随着关键帧动画的播放而变化

实际结果:• 描述文字可见• 将鼠标悬停在描述文本上以激活关键帧动画• 描述文本与关键帧动画描述一起保持可见

Answer 1

编写 description 作为伪元素的 content 属性。目前它是您元素的文本内容，因此不受您的动画影响:

.name::after {
  content: "description";
}
.name:hover::after {
  animation: descriptionChange 3s linear infinite alternate;
}

@keyframes descriptionChange {
  0% {}
  10% {
    content: "Lorem";
  }
  20% {
    content: "delibus";
  }
  30% {
    content: "faccae";
  }
  40% {
    content: "repratia";
  }
  50% {
    content: "enviroments";
  }
  60% {
    content: "itation";
  }
  70% {
    content: "alique";
  }
  80% {
    content: "nuscitatiis";
  }
  90% {
    content: "quis";
  }
}

<span class="name"></span> <br>