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


288

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

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


1
Если вы посмотрите справа на этой странице, есть колонка, озаглавленная « Связано со многими« связанными »темами». Взгляните на некоторые из них .. вы сможете изучить все, что вам нужно.
Мильче Патерн

2
Вы можете пройти краткий курс о переходах CSS на Bradshaw: css3.bradshawenterprises.com
Milche Patern

82
Без обид, если он хочет мигать своим текстом, он хочет мигать своим текстом. Неважно, какой это год. Самые инновационные люди в мире - это те, кто не живет по правилам. Наоборот, они обычно их ломают, а затем каждый их копирует. Я думаю, Apple - отличный пример. Так же как и Маки и т. Д., И я чувствую себя лучше, если люди просто сохранят свое мнение для себя и просто ответят на вопрос по существу :-) Как сказано, без обид. Звучит немного грубо, но я не хочу провоцировать никого не обижать. Никаких обид. ;-)
Лоуренс


Ответы:


659

Сначала вы устанавливаете, 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)


7
Просто заметил, что это, применительно к одному текстовому элементу, потребляет нелепое количество процессоров на моем компьютере с использованием Firefox. Осторожно.
Алекс

2
лучший ответ для того, чтобы быть самым легким для понимания доступным решением
elad silver

4
@ Mr.Alien нет никакой синхронизации между ними - затухание займет немного больше времени, чем таймер (и таймеры не надежны в любом случае), и в конечном итоге вы, скорее всего, получите неограниченную очередь анимаций, поставленных в очередь на элементе. Правильный подход заключается в том, чтобы обойтись без таймера и «рекурсивного» вызова blinkerв качестве обратного вызова завершения вызова .fadeIn.
Альнитак,

3
@ Mr.Alien также все это может быть просто IIFE - эта строка сделает все, включая первоначальный вызов: (function blink() { $('.blink_me').fadeOut(500).fadeIn(500, blink); })();
Alnitak

2
step-endвместо того, linearчто я хотел.
Алекс С

71

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


Как заставить его мигать быстрее? Изменение 1.7s портит это.
Алекс Г

1
@AlexG вы можете заменить cubic-bezierдеталь ease-in-outчем-то другим: cubic-bezier.com
Данило Барген,

+ Один для кубического Безье, потому что все интересные вещи нелинейны
Агниус Василяускас

58

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

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

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<div class="blink">BLINK</div>


5
Единственное верное «мерцание» решения. А также работает со colorсвойством и т. Д. Другие вещи - это обходные пути или «исчезающие» анимации.
Мартин Шнайдер

15

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

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


Это хорошо работает, за исключением iOS Safari. Есть идеи, как заставить его работать на Safari?
Джо Орост

@JoeOrost Я включил JS-альтернативу для браузеров, которые не поддерживают CSS-анимацию. На мой взгляд, это может быть вообще лучшим решением!
MattSturgeon

14

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


2
Это глупо - просто используйте step-start(см. Мой ответ).
Тимммм

Идеально, именно то, что я искал. Недурно.
Самуэль Рамзан

9

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

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

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


4

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


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

0

Это работает для меня, используя 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);
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.