如何使用CSS 3制作闪烁/闪烁文本？

Question

目前,我有这个代码:

@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

.waitingForConnection {
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  -webkit-animation-duration: 1.7s;
}

它闪烁,但它只在"一个方向"闪烁.我的意思是,它只会淡出,然后它会显示opacity: 1.0出来,然后再次淡出,再次出现,等等......我希望它淡出,然后再次从这个淡入淡出"提升" opacity: 1.0.那可能吗？

Answer 1

你是第一个设置opacity: 1;然后你结束它0,所以它从开始0%和结束,100%所以只是将不透明度设置为0at 50%和rest将自己处理.

演示

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<div class="blink_me">BLINK ME</div>

在这里,设置动画持续时间应该是1 second,而不是设置为timing,linear这意味着它将始终保持不变,并且最后使用infinite它意味着它将继续.

注意:如果这不适合你,使用浏览器一样的前缀 -webkit,-moz如需要等animation和 @keyframes.你可以在这里参考我的详细代码

如评论所述,这不适用于旧版本的Internet Explorer,因此,您需要使用jQuery或JavaScript ....

(function blink() {
  $('.blink_me').fadeOut(500).fadeIn(500, blink);
})();

^{感谢Alnitak建议更好的方法.}

演示 (使用jQuery的Blinker)

Answer 2

使用alternate值animation-direction(并且您不需要以这种方式添加任何keframe).

alternate

动画应该在每个循环中反转方向.反向播放时,向后执行动画步骤.此外,定时功能也相反; 例如,在反向播放时,轻松动画会被轻松动画取代.确定它是偶数还是奇数迭代的计数从1开始.

CSS:

.waitingForConnection {
  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
@keyframes blinker { to { opacity: 0; } }

我删除了from关键帧.如果它丢失了,它将从您为opacity元素设置的动画属性(在本例中)中生成的值生成,或者如果您尚未设置它(在这种情况下您没有),则从默认值生成(这是1为了opacity).

请不要只使用WebKit版本.在它之后添加未加前缀的那个.如果您只想编写更少的代码,请使用速记.

Answer 3

获得纯粹的"100%开启,100%关闭"闪烁的最佳方式,就像旧<blink>的一样:

.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<div class="blink">BLINK</div>

Answer 4

如果你想要流畅的动画，试试这个。

    .blink {
        animation: blinker 1s infinite;
    }
      
    @keyframes blinker {
        from { opacity: 1.0; }
        50% { opacity: 0.5; }
        to { opacity: 1.0; }
    }

    <span class="blink">I am blinking</span>

Answer 5

或者,如果您不希望在show和hide之间逐渐过渡(例如闪烁的文本光标),您可以使用以下内容:

/* Also use prefixes with @keyframes and animation to support current browsers */
@keyframes blinker {  
  from { visibility: visible }
  to { visibility: hidden }

  /* Alternatively you can do this:  
  0% { visibility: visible; }
  50% { visibility: hidden; }
  100% { visibility: visible; }
  if you don't want to use `alternate` */
}
.cursor {
  animation: blinker steps(1) 500ms infinite alternate;
}

每一个1s .cursor会从visible到hidden.

如果不支持CSS动画(例如在某些版本的Safari中),您可以回退到这个简单的JS间隔:

(function(){
  var show = 'visible'; // state var toggled by interval
  var time = 500; // milliseconds between each interval

  setInterval(function() {
    // Toggle our visible state on each interval
    show = (show === 'hidden') ? 'visible' : 'hidden';

    // Get the cursor elements
    var cursors = document.getElementsByClassName('cursor');
    // We could do this outside the interval callback,
    // but then it wouldn't be kept in sync with the DOM

    // Loop through the cursor elements and update them to the current state
    for (var i = 0; i < cursors.length; i++) {
      cursors[i].style.visibility = show;
    }
  }, time);
})()

这个简单的JavaScript实际上非常快,在许多情况下甚至可能是比CSS更好的默认值.值得注意的是,许多DOM调用使JS动画变慢(例如JQuery的$ .animate()).

它还有第二个好处,如果你.cursor以后添加元素,它们仍然会与其他.cursors 完全同时生成动画,因为状态是共享的,据我所知,这对CSS来说是不可能的.

Answer 6

我的解决方案：

\n

\r\n

\r\n

.blink {\n animation: blinkMe 2s linear infinite;\n}\n@keyframes blinkMe {\n 0% {\n  opacity: 0;\n }\n 50% {\n  opacity: 1;\n }\n 100% {\n  opacity: 0;\n }\n}

\r\n

<p class="blink">Blink</p>

\r\n

\r\n

\r\n

\n

我使用blinkMe作为动画的名称，2s作为持续时间，线性作为计时，无限以便它永远重复。

\n

我们需要对旧版浏览器使用 JavaScript 和 jQuery，因为它们不\xe2\x80\x99t 支持动画和/或 @keyframes：

\n

\r\n

\r\n

$(document).ready(function() {\n window.setInterval(function() {\n  $(".blink").fadeIn(1000).fadeOut(1000);\n }, 2000)\n});

\r\n

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>\n<p class="blink">Blink</p>

\r\n

\r\n

\r\n

\n

如果你想制作一个像眨眼标签一样工作的眨眼效果，这将起作用：

\n

\r\n

\r\n

.blink {\n animation: blink 0.5s step-start infinite;\n}\n@keyframes blink {\n 0% {\n  opacity: 1;\n }\n 50% {\n  opacity: 0;\n }\n 100% {\n  opacity: 1;\n }\n}

\r\n

<p class="blink">Blink</p>

\r\n

\r\n

\r\n

\n

如果您想调整速度，请更改持续时间。

\n

Answer 7

我不知道为什么但只为该visibility属性制作动画并不适用于任何浏览器.

您可以做的是以opacity一种浏览器没有足够的框架淡入或淡出文本的方式为属性设置动画.

例:

span {
  opacity: 0;
  animation: blinking 1s linear infinite;
}

@keyframes blinking {
  from,
  49.9% {
    opacity: 0;
  }
  50%,
  to {
    opacity: 1;
  }
}

<span>I'm blinking text</span>

Answer 8

改变持续时间和不透明度以适应.

.blink_text { 
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 3s;
    animation-timing-function: linear; 
    animation-iteration-count: infinite; color: red; 
} 

@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
}

@-webkit-keyframes blinker { 
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
} 

@keyframes blinker { 
    0% { opacity: 1.0; } 
    50% { opacity: 0.3; } 
    100% { opacity: 1.0; } 
}

Answer 9

@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}