Имитация мигающего тега с CSS3-анимацией

149

Я действительно хочу, чтобы фрагмент текста моргал в стиле старой школы без использования JavaScript или оформления текста.

Нет переходов, только * мигать *, * мигать *, * мигать *!


РЕДАКТИРОВАТЬ : Это отличается от этого вопроса, потому что я прошу мигать без непрерывных переходов, в то время как ОП других вопросов спрашивает, как заменить мигание с непрерывными переходами

m93a
источник
1
Лучший ответ, который я нашел для этого, к сожалению, был удален оригинальным постером, @ m93a, так что за него еще не проголосовали. Я думаю, что ответ должен быть удален и подвергнут голосованию, поскольку это самое простое решение, которое дает лучший эффект мерцания и работает во всех текущих версиях основных браузеров . Вы также можете прочитать короткий пост в блоге об этом же решении в разделе Эмуляция <blink> с использованием анимации WebKit CSS3 .
Чего я не понимаю, так это того, почему у каждого ответа здесь есть @-webkit-keyframesправило после@keyframes правила без префикса , а у некоторых даже есть -webkit-animationобъявление после правила без префикса.
BoltClock
@BoltClock: это потому, что анимации CSS3 относительно новы и еще не стабильны в браузерах Webkit. Так называемый «префикс» здесь для разработчиков, которые хотят использовать анимацию, даже если они нестабильны и не завершены.
M93A
@ m93a: Я знаю это, но я спрашиваю, почему они размещены после правила без префикса, а не перед ним (очевидно, я не включил эту фразу в свой оригинальный комментарий, моя ошибка).
BoltClock

Ответы:

242

Оригинальный Netscape <blink>имел рабочий цикл 80%. Это довольно близко, хотя реальное <blink>влияет только на текст:

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
This is <span class="blink">blinking</span> text.

Вы можете найти больше информации о анимации ключевых кадров здесь .

Нил
источник
2
Да, это намного проще. Вы можете добавить префикс webkit, чтобы он работал в Chrome и Safari.
m93a
2
Это может не работать в Chrome / safari без префиксов webkit.
Дэвид Пелаес
2
То, что мне нравится делать, это вместо того, чтобы делать blink классом, делать blink тегом (с blink { animation: blink 1s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite; }). Таким образом, вы можете просто использовать <blink>тег вместо <span class="blink">=)
416E64726577
Примечание. Это только запрошенная имитация «<blink> имитация». Не может использоваться со colorсвойством ie как анимация "on-off" -blink.
Мартин Шнайдер
97

Позвольте мне показать вам маленький трюк.

Как сказал Arkanciscan , вы можете использовать CSS3 переходы. Но его решение выглядит иначе, чем оригинальный тег.

Что вам действительно нужно сделать, это:

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}
.blink {
  animation: blink 1s step-start 0s infinite;
  -webkit-animation: blink 1s step-start 0s infinite;
}
<span class="blink">Blink</span>

JSfiddle Demo

m93a
источник
@ Сорок два Извините, я забыл префикс -webkit- . Я думаю, это сработало для всех существующих браузеров, кроме Chrome и Safari. Теперь, после обновления, он должен работать для Firefox, Chrome, Opera, Safari и MSIE10.
m93a
Как написано, этот ответ действительно будет работать в текущих версиях Firefox, Chrome, Safari и IE .
2
Не работает из-за опечатки: в части webkit blinkотсутствует имя анимации . Исправлена.
Андреа Лигиос
1
Хорошо
Хамид Бехнам
1
@ m93a: 0% 100% { opacity: 1.0; }разделы кажутся лишними, так как они по умолчанию, нет?
Джамадагни
48

Попробуйте этот CSS

@keyframes blink {  
  0% { color: red; }
  100% { color: black; }
}
@-webkit-keyframes blink {
  0% { color: red; }
  100% { color: black; }
}
.blink {
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  animation: blink 1s linear infinite;
} 
This is <span class="blink">blink</span>

Вам нужны специфичные для браузера / поставщика префиксы: http://jsfiddle.net/es6e6/1/ .

Belyash
источник
1
Нет ничего похожего на -ms-animation или -o-animation, а -moz-animation было только в версии 15, не используйте его сейчас. Посмотрите на caniuse.com, чтобы увидеть фактическую поддержку. Извините, но я не приму этот вопрос :( PS: Вы можете использовать «редактировать» на ответы других.
m93a
Это просто моя старая дурная привычка - добавлять суффиксы ко всем новым свойствам CSS3. Обновленный ответ.
Беляш
это не "мигать", а "мигать-исчезать".
Мартин Шнайдер
30

Там на самом деле нет необходимости visibilityили opacity- вы можете просто использовать color, что имеет преимущество в сохранении любого "моргания" только к тексту:

blink {
    display: inline;
    color: inherit;
    animation: blink 1s steps(1) infinite;
    -webkit-animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { color: transparent; } }
@-webkit-keyframes blink { 50% { color: transparent; } }
Here is some text, <blink>this text will blink</blink>, this will not.

Скрипка: http://jsfiddle.net/2r8JL/

SB
источник
4
Чудесно! Это единственное решение, которое обеспечивает мигание только текста. Все остальные решения также мигают фоном элемента. Чтобы проверить, используйте <span>с белым на синем тексте <body>с зеленым фоном. Только в этом решении синий фон диапазона не будет мигать.
Джамадагни
10

Я собираюсь в ад за это:

=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content


+keyframes(blink)
  25%
    zoom: 1
    opacity: 1

  65%
    opacity: 1 

  66%
    opacity: 0

  100%
    opacity: 0

body
  font-family: sans-serif
  font-size: 4em
  background: #222
  text-align: center

  .blink
    color: rgba(#fff, 0.9)
    +animation(blink 1s 0s reverse infinite)
    +transform(translateZ(0))

.table
  display: table
  height: 5em
  width: 100%
  vertical-align: middle

  .cell
    display: table-cell
    width: 100%
    height: 100%
    vertical-align: middle

http://codepen.io/anon/pen/kaGxC (сас с бурбоном)

airtonix
источник
1
Ваш кодовый блок генерирует Undefined mixin 'experimental'.ошибку, и, таким образом, похоже, что он не будет компилироваться и отображать анимацию мерцания.
6

Еще один вариант

.blink {
    -webkit-animation: blink 1s step-end infinite;
            animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink { 50% { visibility: hidden; }}
        @keyframes blink { 50% { visibility: hidden; }}
This is <span class="blink">blink</span>

Саша Софин
источник
2

В моем случае работает мигающий текст с интервалом 1 с.

.blink_me {
  color:#e91e63;
  font-size:140%;
  font-weight:bold;
  padding:0 20px 0  0;
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% { opacity: 0.4; }
}
Аджай Кумар
источник
-3

если вы хотите эффект свечения, используйте это

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}

atom-text-editor::shadow  .bracket-matcher .region {
    border:none;
    background-color: rgba(195,195,255,0.1);
    border-bottom: 1px solid rgb(155,155,255);
    box-shadow: 0px 0px 9px 4px rgba(155,155,255,0.1);
    border-radius: 3px;
    animation: blink 2s steps(115, start) infinite;
    -webkit-animation: blink 2s steps(115, start) infinite;
}
minaretsbayonet
источник
-5

Пожалуйста, найдите ниже решение для вашего кода.

@keyframes blink {
  50% {
    color: transparent;
  }
}

.loader__dot {
  animation: 1s blink infinite;
}

.loader__dot:nth-child(2) {
  animation-delay: 250ms;
}

.loader__dot:nth-child(3) {
  animation-delay: 500ms;
}
Loading <span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span>

Вишал Кири
источник