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

我想知道是否有一个完整的CSS的方式来复制以下动画（出现和消失的工具提示框）和再次出现。 我希望它是递归的

---

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

例如：

HTML

下面是一个JSFIDLE：

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

---

谢谢Fabio的示例，一个补充问题是如何为隐藏和显示添加特定的持续时间？@kom您还可以更改关键帧的百分比。。。检查更新的JSFIDLE：请发布您尝试的代码和研究。我基于@Fabio advises做了一些测试。该动画称为poopinout

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

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