首先设置opacity: 1;
,然后在上结束0
,所以它从始于,在0%
结束100%
,因此只需将opacity设置为0
at50%
,其余的将自己处理。
.blink_me {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
<div class="blink_me">BLINK ME</div>
在这里,我将动画持续时间设置为1second
,然后将设置timing
为linear
。这意味着它将始终保持不变。最后,我正在使用infinite
。这意味着它将继续下去。
注:如果这不会为你工作,使用浏览器前缀喜欢 -webkit
,-moz
等按要求animation
和 @keyframes
。
如前所述,这不适用于较旧版本的Internet Explorer,因此您需要使用jQuery或JavaScript …
(function blink() {
$('.blink_me').fadeOut(500).fadeIn(500, blink);
})();