Как сделать мигающий / мигающий текст с помощью CSS 3

Сначала вы устанавливаете opacity: 1;, а затем завершаете его на 0, поэтому он начинается с 0% и заканчивается на 100%, поэтому вместо этого просто установите непрозрачность на 0 на 50%, а остальное позаботится само.

Демонстрация

.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);
})();

^{Спасибо Альнитаку за предложение лучшего подхода < / а>.}

Демо (Blinker с использованием jQuery)

Лучший способ получить чистое мигание "100% включено, 100% выключено", как в старом <blink>, выглядит так:

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

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

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

Используйте значение alternate для animation-direction (и вам не нужно добавлять таким образом кефреймы).

alternate

Анимация должна менять направление каждого цикла. При воспроизведении в обратном направлении шаги анимации выполняются в обратном направлении. Кроме того, функции синхронизации также меняются местами; например, анимация замедления при воспроизведении в обратном направлении заменяется анимацией замедления. Счетчик для определения, четная или нечетная итерация начинается с единицы.

CSS:

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

Я удалил ключевой кадр from. Если он отсутствует, он генерируется из значения, которое вы установили для анимированного свойства (в данном случае opacity) в элементе, или, если вы его не установили (а в данном случае вы его не установили), из значения по умолчанию. значение (которое равно 1 для opacity).

И, пожалуйста, не используйте только версию WebKit. Добавьте после него и без префикса. Если вы просто хотите писать меньше кода, используйте сокращение.

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

.waitingForConnection2 {
  animation: blinker2 0.6s cubic-bezier(1, 0, 0, 1) infinite alternate;  
}
@keyframes blinker2 { to { opacity: 0; } }

.waitingForConnection3 {
  animation: blinker3 1s ease-in-out infinite alternate;  
}
@keyframes blinker3 { to { opacity: 0; } }

<div class="waitingForConnection">X</div>
<div class="waitingForConnection2">Y</div>
<div class="waitingForConnection3">Z</div>

В качестве альтернативы, если вы не хотите постепенного перехода между отображением и скрытием (например, мигающий текстовый курсор), вы можете использовать что-то вроде:

/* 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 (например, $ .animate () из JQuery).

У него также есть второе преимущество: если вы добавите .cursor элементов позже, они по-прежнему будут анимироваться точно в то же время, что и другие .cursor, поскольку состояние является общим, это невозможно с CSS, насколько мне известно.

Я не знаю почему, но анимация только свойства 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>

Измените продолжительность и непрозрачность по своему усмотрению.

.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; } 
}

Поздно, но хотелось добавить новый с большим количеством ключевых кадров ... вот пример на CodePen поскольку возникла проблема со встроенными фрагментами кода:

.block{
  display:inline-block;
  padding:30px 50px;
  background:#000;
}
.flash-me {
  color:#fff;
  font-size:40px;
  -webkit-animation: flash linear 1.7s infinite;
  animation: flash linear 1.7s infinite;
}

@-webkit-keyframes flash {
  0% { opacity: 0; } 
  80% { opacity: 1; color:#fff; } 
  83% { opacity: 0; color:#fff; } 
  86% { opacity: 1; color:#fff;}  
  89% { opacity: 0} 
  92% { opacity: 1; color:#fff;} 
  95% { opacity: 0; color:#fff;}
  100% { opacity: 1; color:#fff;}
}
@keyframes flash {
  0% { opacity: 0; } 
  80% { opacity: 1; color:#fff; } 
  83% { opacity: 0; color:#fff; } 
  86% { opacity: 1; color:#fff;}  
  89% { opacity: 0} 
  92% { opacity: 1; color:#fff;} 
  95% { opacity: 0; color:#fff;}
  100% { opacity: 1; color:#fff;}
}

<span class="block">
  <span class="flash-me">Flash Me Hard</span>
</span>

Мое решение:

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

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

Я использую blinkMe для названия анимации, 2 секунды для продолжительности, линейной для времени и бесконечной, чтобы она повторялась бесконечно.

Нам нужно использовать JavaScript и jQuery для старых браузеров, поскольку они не поддерживают анимацию и / или @keyframes:

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

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

Если вы хотите создать эффект мигания, который работает так же, как тег мигания, это сработает:

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

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

Измените продолжительность, если хотите настроить скорость.

.neon {
  font-size: 20px;
  color: #fff;
  text-shadow: 0 0 8px yellow;
  animation: blinker 6s;
  animation-iteration-count: 1;
}
@keyframes blinker {
  0% {
    opacity: 0.2;
  }
  19% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  21% {
    opacity: 1;
  }
  22% {
    opacity: 0.2;
  }
  23% {
    opacity: 0.2;
  }
  36% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
  41% {
    opacity: 0;
  }
  42% {
    opacity: 1;
  }
  43% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

Я использовал font-family: "Quicksand", sans-serif;

Это импорт шрифта (находится в верхней части style.css)

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap");

У меня это работает, используя class = blink для соответствующих элементов.

Простой код JS

// Blink
      setInterval(function()
        {

        setTimeout(function()
        {

        //$(".blink").css("color","rgba(0,0,0,0.1)"); // If you want simply black/white blink of text
        $(".blink").css("visibility","hidden"); // This is for Visibility of the element  


        },900);


        //$(".blink").css("color","rgba(0,0,0,1)");  // If you want simply black/white blink of text
        $(".blink").css("visibility","visible");  // This is for Visibility of the element

        },1000);

Если вам нужна плавная анимация, попробуйте это.

.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>