期待有一个代码消失并再次变得坚固,但不会在那里褪色而不是那里

问题描述 投票:1回答:1

我想要一个项目显示然后消失。然后它应该重新出现,但不应该有渐进的淡化效果。该项目应该消失并在设定的时间间隔内返回,此行为应无限期地继续。

这就是我到目前为止所拥有的。我无法弄清楚什么是破碎而不是拉我的颜色等。任何帮助都是极好的!

.goal-cont {
  color: white;
  background: black;
  opacity: 0;
  height: 100px;
  width: 100px;
  animation: opacityOn 600s normal forwards;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

.blinking {
  animation: blinkingText 10s infinite;
}

@keyframes blinkingText {
  0% {color: #000;}
  50% {color: transparent;}
  99% {color: transparent;}
  100% {color: #000;}
}
<div class="blinking" /span>
  <div id='title'></div>
  <div id='goal-bar'>
    <span id='goal-current'>0</span>/<span id='goal-total'>0</span>
  </div>
  <div id='goal-end-date'>
  </div>
</div>
html css
1个回答
1
投票

为了你想要的,你走在正确的轨道上。

你想要照顾的东西很少:

  • 决定文本应显示多长时间?
  • 它应该显示多长时间?
  • 如果你不想让它褪色,请避免在CSS中使用transition属性。

数学计算:

文字出现:5m

文字消失:20m

动画总持续时间:5m + 20m = 25m

CSS关键帧计算:

CSS动画关键帧包含基于百分比的帧,这里我们将有0%到100%。

25m ---- 100%
05m ----  ?

20% of 100% = 5m of total duration(i.e. 25m)

持续时间基于假设,您可以根据您的要求进行更改。另外,在下面的示例中,将minutes的持续时间替换为seconds,这样我们在测试动画时不需要等待太长时间。

/*You have not used below class so have put into a comment*/
/*
.goal-cont {
  color: white;
  background: black;
  opacity: 0;
  height: 100px;
  width: 100px;
  animation: opacityOn 600s normal forwards;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}
*/

.blinking {
  animation: blinkingText 25s infinite;
}

@keyframes blinkingText {
  0% {color: #000;}
  20% {color: #000;}
  20.01% {color: transparent;}
  99.99% {color: transparent;}
  100% {color: #000;}
}
<div class="blinking" /span>
  <div id='title'></div>
  <div id='goal-bar'>
    <span id='goal-current'>0</span>/<span id='goal-total'>0</span>
  </div>
  <div id='goal-end-date'>
  </div>
</div>

希望这能以某种方式帮助你。

© www.soinside.com 2019 - 2024. All rights reserved.