Имитация тега blink с анимацией CSS3

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

нет переходов, только * blink*, * blink*, * blink*!

редактировать: это отличается от этот вопрос потому что я прошу мигание без непрерывных переходов, тогда как OP других вопросов задает, как заменить мигание С непрерывной переходы

129
blink css css-animations css3 html

9 ответов

оригинальный 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.

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

204

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

Как 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

76

попробуйте этот 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/.

42

на самом деле нет необходимости 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/

25

я попаду в ад за это : 

=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 (Сасс с бурбоном)

9

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

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

он работает в моем случае мигает текст с интервалом 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; }
}
1

Если вы хотите какой-то эффект свечения использовать этот 

@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;
}
-3

ниже вы найдете решение для вашего кода. 

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