当鼠标悬停时,关键帧动画可以正常播放...尽管原始文本不会消失。

我尝试尽我所知创建悬停关键帧动画,尽管现在停滞了(使用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编写为伪元素的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>

关于javascript - 如何在悬停时用关键帧动画文本替换文本?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57156020/

10-12 12:33
查看更多