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

Question

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

http://bourbon.io/

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;
  }
}

这是一个 jsfiddle：

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

您也可以查看此页面了解更多信息：

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