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

В настоящее время у меня есть этот код:

@-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. Это возможно?

Сначала вы устанавливаете, opacity: 1;а затем заканчиваете его 0, поэтому он начинается 0%и заканчивается 100%, поэтому вместо этого просто установите непрозрачность на 0at, 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);
})();

^{Спасибо Alnitak за предложение лучшего подхода .}

Демо (Blinker используя jQuery)

Используйте 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. Добавьте еще один без префикса. Если вы просто хотите написать меньше кода, используйте сокращение .

Лучший способ получить чистое моргание «100%, 100%», например, старый <blink>:

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

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

<div class="blink">BLINK</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; } 
}

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

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

.blink {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  animation: blinker 2s linear infinite;
  background-color: red;
  margin-right: 5px;
}

.content {
  display: flex;
  flex-direction: row;
  align-items: center;
}

<div class="content">
  <i class="blink"></i>
  LIVE
</div>

Поздно, но хотел добавить новый с большим количеством ключевых кадров ... вот пример на 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>

<style>
    .class1{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:#2a9fd4;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:45px;
    }
     .class2{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:green;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:65px;
    }
</style>
<script src="jquery-3.js"></script>
<script>
    $(document).ready(function () {
        $('#div1').addClass('class1');
        var flag = true;

        function blink() {
            if(flag)
            {
                $("#div1").addClass('class2');
                flag = false;
            }
            else
            { 
                if ($('#div1').hasClass('class2'))
                    $('#div1').removeClass('class2').addClass('class1');
                flag = true;
            }
        }
        window.setInterval(blink, 1000);
    });
</script>

Это работает для меня, используя 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);