【问题标题】:Show / hide content recursively base on a delay基于延迟递归地显示/隐藏内容
【发布时间】:2017-07-18 02:49:45
【问题描述】:

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

http://bourbon.io/

【问题讨论】:

标签: css animation hide transition show


【解决方案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

【讨论】:

  • 谢谢法比奥的例子,一个补充问题如何为隐藏和表演添加特定的持续时间?
  • @Komagain 您可以更改关键帧的百分比...检查更新的 jsfiddle:jsfiddle.net/fabio1983/j6jj9766/2
猜你喜欢
  • 2015-12-21
  • 1970-01-01
  • 2013-05-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-02-22
  • 1970-01-01
相关资源
最近更新 更多