texto - parpadeo css blink

¿Cómo hacer un texto parpadeante/intermitente con CSS 3?

Question

Actualmente, tengo este código:

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

Parpadea, pero solo parpadea en "una dirección". Quiero decir, solo se desvanece, y luego aparece de nuevo con opacity: 1.0 , luego nuevamente se desvanece, aparece de nuevo, y así sucesivamente ... Me gustaría que desaparezca, y luego "subir" de este desvanecimiento de nuevo a la opacity: 1.0 . ¿Es eso posible?

Answer 1

Alternativamente, si no desea una transición gradual entre mostrar y ocultar (por ejemplo, un cursor de texto parpadeante), podría usar algo como:

/* 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;
}

Cada .cursor irá de visible a hidden .

Si la animación CSS no es compatible (por ejemplo, en algunas versiones de Safari) puede retroceder a este simple intervalo 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);
})()

Este simple JavaScript es en realidad muy rápido y en muchos casos puede ser incluso un valor predeterminado mejor que el CSS. Vale la pena señalar que son muchas las llamadas a DOM que hacen que las animaciones de JS sean lentas (por ejemplo, $ .animate () de JQuery).

También tiene la segunda ventaja de que si agrega los elementos .cursor más adelante, seguirán .cursor exactamente al mismo tiempo que los otros .cursor , ya que el estado se comparte, esto es imposible con el CSS, que yo sepa.

Answer 2

Cambiar la duración y la opacidad para adaptarse.

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

Answer 3

La mejor manera de obtener un parpadeo puro "100% encendido, 100% apagado", como el antiguo <blink> es así:

.blink {
animation: blinker 1s step-start infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}

<div class="blink">BLINK</div>

Answer 4

No sé por qué, pero la animación de la propiedad de visibility no funciona en ningún navegador.

Lo que puede hacer es animar la propiedad de opacity de tal manera que el navegador no tenga suficientes marcos para que aparezca o desaparezca el texto.

Ejemplo:

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>

Answer 5

Primero estás configurando la opacity: 1; y luego lo terminas en 0 , por lo que comienza desde 0% y termina en 100% por lo que en lugar de eso solo ajusta la opacidad a 0 en 50% y el resto se hará cargo de sí mismo.

Demo

.blink_me {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}

<div class="blink_me">BLINK ME</div>

Aquí, la configuración de la duración de la animación debería ser de 1 second , en lugar de establecer la timing en linear que significa que será constante, y la última vez que use infinite significa que continuará y continuará.

Nota: Si esto no funciona para usted, use los prefijos del navegador como -webkit , -webkit y demás, según sea necesario para la animation y @keyframes . Puedes consultar mi código detallado here

Como se comentó, esto no funcionará en versiones anteriores de Internet Explorer, para eso necesitas usar jQuery o JavaScript ...

(function blink() {
$(''.blink_me'').fadeOut(500).fadeIn(500, blink);
})();

^{Gracias a Alnitak por sugerir un mejor enfoque .}

Demo (Blinker utilizando jQuery)

Answer 6

Tardío, pero quería agregar uno nuevo con más fotogramas clave ... aquí hay un ejemplo en CodePen ya que hubo un problema con los fragmentos de código integrados:

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

Answer 7

Utilice el valor alternate para animation-direction de la animation-direction (y no es necesario que agregue ningún keframa de esta manera).

alternate

La animación debe revertir la dirección de cada ciclo. Cuando se juega en reversa, los pasos de animación se realizan hacia atrás. Además, las funciones de temporización también se invierten; por ejemplo, una animación de facilidad se reemplaza con una animación de relajación cuando se reproduce en reversa. El conteo para determinar si es una iteración par o impar comienza en uno.

CSS :

.waitingForConnection {
animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}
@keyframes blinker { to { opacity: 0; } }

He eliminado el from fotograma clave. Si falta, se genera a partir del valor que ha establecido para la propiedad animada ( opacity en este caso) en el elemento, o si no lo ha establecido (y no lo ha hecho en este caso), desde el valor predeterminado valor (que es 1 para la opacity ).

Y, por favor, no uses solo la versión WebKit. Agregue el que no está prefijado después también. Si solo quieres escribir menos código, usa la taquigrafía .

Answer 8

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

Answer 9

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