Імітація блимаючого тегу з анімацією CSS3


149

Я дуже хочу, щоб фрагмент тексту блимав стиль старої школи, не використовуючи JavaScript або прикраси тексту.

Ніяких переходів, лише * блимати *, * блимати *, * мигати *!


EDIT : Це відрізняється від цього питання, оскільки я прошу блимати без безперервних переходів, тоді як ОП з інших питань запитує, як замінити моргання безперервними переходами


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.

Ви можете знайти більше інформації про Keyframe Animations тут .


2
Так, це набагато простіше. Ви можете додати префікс webkit, щоб він працював у Chrome та Safari.
m93a

2
Це може не працювати на Chrome / safari без префіксів webkit.
Девід Пелаес

2
Мені подобається робити, замість того, щоб миготіти класом, роблячи блимати тегом (з blink { animation: blink 1s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite; }). Таким чином, ви можете просто використовувати <blink>тег, а не <span class="blink">=)
416E64726577

Примітка. Це лише запитуване в ОП "<блимання> імітація". Не можна використовувати, тобто colorвластивість як "ввімкнено" -blink-анімацію.
Мартін Шнайдер

97

Дозвольте показати вам невелику хитрість.

Як сказав Арканчискан , ви можете використовувати переходи 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


@ Сорок два Вибачте, я забув приставку -webkit- . Думаю, це працювало для всіх фактичних веб-переглядачів, окрім Chrome і Safari. Тепер, після оновлення, він повинен працювати для Firefox, Chrome, Opera, Safari та MSIE10.
m93a

Як було написано, ця відповідь справді працюватиме в поточних версіях Firefox, Chrome, Safari та IE .

2
Не вдалося ввести помилку: у частині веб-календаря blinkвідсутня назва анімації . Виправлено.
Андреа Лігіос


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


1
Немає нічого подібного -ms-анімація або -o-анімація, і -moz-анімація була лише у версії 15, не використовуйте її зараз. Подивіться на caniuse.com, щоб побачити фактичну підтримку. Вибачте, але я не прийму це питання :( PS: Ви можете використовувати "редагувати" у відповідях інших.
m93a

Це лише моя стара шкідлива звичка - додайте суфікси до всіх нових властивостей CSS3 .. Оновлена ​​відповідь.
Беляш

це не "моргання", а "блимати-fadeOut".
Мартін Шнайдер

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.

Fiddle: http://jsfiddle.net/2r8JL/


4
Чудово! Це єдине рішення, яке забезпечує моргання лише тексту. Усі інші рішення також блимають фон елемента. Для тестування використовуйте текст <span>із білим на синім кольором на <body>зеленому тлі. Тільки в такому рішенні блакитний проміжок фону не буде блимати.
jamadagni

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 (sass з бурбоном)


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

Він працює в моєму випадку блимаючи текст через інтервал 1s.

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

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.