html - parpadeo - Imitar una etiqueta parpadeante con animaciones CSS3

efecto parpadeo en html

Question

Realmente quiero hacer que un trozo de texto parpadee al estilo de la vieja escuela sin usar javascript o text-decoration.

Sin transiciones, solo * blink *, * blink *, * blink *!

EDITAR : Esto es diferente de esa pregunta porque pido un parpadeo sin transiciones continuas, mientras que OP de las otras preguntas pregunta cómo reemplazar el parpadeo con transiciones continuas

Answer 1

Déjame mostrarte un pequeño truco.

Como said Arkanciscan, puedes usar transiciones CSS3. Pero su solución se ve diferente a la etiqueta original.

Lo que realmente necesitas hacer es esto:

@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

Answer 2

El Netscape <blink> tenía un ciclo de trabajo del 80%. Esto viene bastante cerca, aunque el <blink> real solo afecta el texto:

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

Puede encontrar más información sobre Animaciones de fotogramas clave aquí .

Answer 3

En realidad, no hay necesidad de visibility u opacity ; simplemente puede usar el color , que tiene el lado positivo de mantener el "parpadeo" solo en el texto:

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/

Answer 4

Encuentre a continuación la solución para su código.

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

Answer 5

Está funcionando en mi caso parpadeando el texto en el intervalo de 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; }
}

Answer 6

Me voy al infierno por esto:

=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 con bourbon)

Answer 7

Otra variación

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

Answer 8

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

Necesita prefijos específicos del navegador / proveedor: http://jsfiddle.net/es6e6/1/ .