如何使用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

或者，如果您不希望在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来说是不可能的。