Cómo hacer que el texto parpadee / parpadee con CSS 3


288

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 se desvanece nuevamente, aparece de nuevo, y así sucesivamente ...

Me gustaría que se desvaneciera, y luego "subir" de este desvanecimiento nuevamente opacity: 1.0. ¿Es eso posible?


1
Si echa un vistazo a la derecha de esta página, hay una columna titulada Relacionado con muchos temas 'relacionados'. Eche un vistazo a algunos de esos ... podrá estudiar todo lo que necesita.
Milche Patern

2
Puede tomar un curso rápido sobre las transiciones CSS en bradshaw: css3.bradshawenterprises.com
Milche Patern

82
Sin ofender, si quiere parpadear su texto, quiere parpadear su texto. No importa en qué año sea. Las personas más innovadoras del mundo son aquellas que no viven según las reglas. Todo lo contrario, generalmente los rompen y luego, todos los copian. Supongo que Apple es un gran ejemplo. También lo es Mackie, etc., etc. Me sentiría mejor si la gente simplemente guardara sus opiniones y respondiera la pregunta al punto :-) Como dije, sin ofender. Suena un poco duro, pero no quiero provocar no ofender a nadie. Sin resentimientos. ;-)
Lawrence


Respuestas:


657

Primero está configurando opacity: 1;y luego lo está terminando 0, por lo que comienza 0%y termina 100%, así que simplemente configure opacidad en 0at 50%y el resto se encargará de sí mismo.

Manifestación

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<div class="blink_me">BLINK ME</div>

Aquí, configuro la duración de la animación para que sea 1 second, y luego configuro la timingpara linear. Eso significa que será constante en todo momento. Por último, estoy usando infinite. Eso significa que seguirá y seguirá.

Nota: Si esto no funciona para usted, use prefijos del navegador como -webkit, -mozetc., según sea necesario para animationy @keyframes. Puedes consultar mi código detallado aquí


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

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

Gracias a Alnitak por sugerir un mejor enfoque .

Demostración (Blinker usando jQuery)


77
Acabo de notar que esto, aplicado a un elemento de texto, consume una cantidad ridícula de CPU en mi computadora usando Firefox. Tener cuidado.
Alex

2
la mejor respuesta para ser la solución más fácil de entender disponible
elad silver

44
@ Mr.Alien no hay sincronización entre los dos: los desvanecimientos tardarán un poco más que el temporizador (y los temporizadores no son confiables de todos modos) y eventualmente terminarás con una cola ilimitada de animaciones en cola en el elemento. El enfoque correcto sería prescindir del temporizador y llamar "recursivamente" blinkercomo devolución de llamada de finalización a la .fadeInllamada.
Alnitak

3
@ Mr.Alien también todo podría ser un IIFE: esta línea lo hará todo, incluida la invocación inicial: (function blink() { $('.blink_me').fadeOut(500).fadeIn(500, blink); })();
Alnitak

2
step-enden lugar de linearera lo que quería.
Alex S

71

Use el alternatevalor para animation-direction(y no necesita agregar ningún marco de imagen de esta manera).

alternate

La animación debe invertir la dirección de cada ciclo. Cuando se juega en reversa, los pasos de la animación se realizan hacia atrás. Además, las funciones de temporización también se invierten; por ejemplo, una animación de facilitación se reemplaza con una animación de facilidad cuando se reproduce en reversa. El recuento 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 fromfotograma clave. Si falta, se genera a partir del valor que ha establecido para la propiedad animada ( opacityen este caso) en el elemento, o si no lo ha establecido (y no lo ha hecho en este caso), a partir del valor predeterminado (que es 1para opacity)

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


¿Cómo hacer que parpadee más rápido? Cambiar 1.7s lo arruina.
Alex G

1
@AlexG podría reemplazar la cubic-bezierpieza con ease-in-outo algo más: cubic-bezier.com
Danilo Bargen

+ Uno para bezier cúbico, porque todas las cosas interesantes no son lineales
Agnius Vasiliauskas

57

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

.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<div class="blink">BLINK</div>


55
La única solución verdadera de "parpadeo". Y también funciona con colorpropiedades, etc. Otras cosas son soluciones alternativas o animaciones "fade".
Martin Schneider

15

Alternativamente, si no desea una transición gradual entre mostrar y ocultar (por ejemplo, un cursor de texto parpadeante) puede 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;
}

Todo 1s .cursorirá de visiblea hidden.

Si la animación CSS no es compatible (por ejemplo, en algunas versiones de Safari), puede recurrir 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 realmente muy rápido y, en muchos casos, incluso puede ser un valor predeterminado mejor que el CSS. Vale la pena señalar que hay muchas llamadas DOM que hacen que las animaciones JS sean lentas (por ejemplo, $ .animate () de JQuery).

También tiene la segunda ventaja de que si agrega .cursorelementos más adelante, aún se animarán exactamente al mismo tiempo que los demás .cursor, ya que el estado es compartido, esto es imposible con CSS, que yo sepa.


Esto funciona bien, EXCEPTO para iOS Safari. ¿Alguna idea de cómo hacer que funcione en Safari?
Joe Orost

@JoeOrost He incluido una alternativa JS para navegadores que no admiten animaciones CSS. En mi opinión, en realidad puede ser una mejor solución en general.
MattSturgeon

14

No sé por qué, pero animar solo la visibilitypropiedad no funciona en ningún navegador.

Lo que puede hacer es animar la opacitypropiedad de tal manera que el navegador no tenga suficientes marcos para fundir o desvanecer 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>


2
Esto es una tontería, solo use step-start(vea mi respuesta).
Timmmm el

Perfecto, justo lo que estaba buscando. Pulgares hacia arriba.
Samuel Ramzan

9

Cambia la duración y la opacidad a tu gusto.

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

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


4

Tarde 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 incorporados:

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


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

0

Funciona para mí usando class = blink para los elementos respectivos

Código JS simple

// Blink
      setInterval(function()
        {

        setTimeout(function()
        {

        //$(".blink").css("color","rgba(0,0,0,0.1)"); // If you want simply black/white blink of text
        $(".blink").css("visibility","hidden"); // This is for Visibility of the element  


        },900);


        //$(".blink").css("color","rgba(0,0,0,1)");  // If you want simply black/white blink of text
        $(".blink").css("visibility","visible");  // This is for Visibility of the element

        },1000);
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.