时间戳

首页 > 解决方案 > CSS自动隐藏/显示每2秒

html - CSS自动隐藏/显示每2秒

问题描述

我想使用 css 隐藏和显示一个 div，例如：

显示 => 隐藏 => 显示 =>...

为此，我尝试了该代码：

#showMe {
  animation: cssAnimation 0s 2s forwards;
  visibility: hidden;
}

@keyframes cssAnimation {
  to   { visibility: visible;
        
  }
}

但它只会隐藏它，请大家帮忙！！

标签： htmlcss

解决方案

One way to do this is by adding keyframes for a specific progress (time-progress).

Some attributes in CSS are not animateable, so if you try to animate them they get instantly set to your "to" value, which is visible. To work around this, we simply set the visibility to hidden(in css) and keep it until 50% (in animation). At 51% we set it to visible, where it gets instantly shown (until the end).

To make it "blinking" you can repeat this animation by appending infinite which is a shorthand for animation-iteration-count: infinite.

#showMe {
  animation: cssAnimation 1s infinite;
  visibility: hidden;
}

@keyframes cssAnimation {
  50% {
    visibility: hidden;
  }
  51% {
    visibility: visible;
  }
}
<div id="showMe">(╯°□°)╯︵ ┻━┻&lt;/div>

推荐阅读