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

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>

预期成果：• 描述文本可见• 将鼠标悬停在描述文本上以激活关键帧动画• 描述文本随着关键帧动画的播放而更改

实际结果：• 描述文本可见• 将鼠标悬停在描述文本上以激活关键帧动画• 描述文本与关键帧动画 description

Answer 1

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

Answer 2

如果您需要保持HTML结构完整(即不想添加另一个DOM元素(，那么一种方法是通过在:hover期间为其分配透明颜色来隐藏"描述"文本：

.name:hover {
  color:transparent;
}
/* Need to "reset" pseudo elements color to black */
.name:hover::before {
  color:black;
  content: "";
  animation: descriptionChange 3s linear infinite alternate;
}

另请注意，我使用的是:before而不是:after - 这可确保动画描述在悬停期间出现替换"描述"文本的外观：

.name:hover {
  color:transparent;
}
.name:hover::before {
color:black;
  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 3

您可以通过将

description文本包装在另一个元素中来做到这一点：

.name {
  position: relative;
}
.name:hover::after {
  content: "";
  animation: descriptionChange 3s linear infinite alternate;
  position: absolute;
  left: 0;
}
.name:hover > span {
  visibility: hidden;
}
@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>description</span></span> <br>