我想要一个项目显示然后消失。然后它应该重新出现,但不应该有渐进的淡化效果。该项目应该消失并在设定的时间间隔内返回,此行为应无限期地继续。
这就是我到目前为止所拥有的。我无法弄清楚什么是破碎而不是拉我的颜色等。任何帮助都是极好的!
.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>
为了你想要的,你走在正确的轨道上。
你想要照顾的东西很少:
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>
希望这能以某种方式帮助你。