Question

我想知道在完整的CSS中是否有一种方法可以重现以下动画（出现并消失的工具提示框）并再次出现。我希望它是递归的

Answer 1

您可以使用动画属性（使用自定义动画）执行此操作。

示例：

HTML

<div id="container">
  <div id="animatediv">
  </div>
</div>

CSS

#container {
  background-color: yellow;
  display: inline-block;
  padding: 40px;
}

#animatediv {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: hideshow;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes hideshow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

这是一个小伙伴：

https://jsfiddle.net/fabio1983/j6jj9766/

您还可以查看此页面以获取更多信息：

https://www.w3schools.com/css/css3_animations.asp

基于延迟递归显示/隐藏内容

1 个答案: