CSS3 como hacer que el texto haga “blink”

Conocimiento es poder!

CSS3 como hacer que el texto haga “blink”

Como muchos sabran desde la llegada de CSS3 es posible crear animaciones en la mayoria de los elementos HTML sin usar JQuery, JavaScript o Flash!

En el siguiente post muestro como hacer que el texto haga blink o “parpadee” usando solo CSS3 y HTML de una manera facil y rapida.

Código CSS3

/* Red text animation*/
.redTextAni {
    color: rgb(204, 34, 71);
    position: relative;
    -webkit-animation-name: redText; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    animation-name: redText;
    animation-duration: 3s;
    animation-iteration-count: infinite;
  }
  
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes redText {
    0%   {color:rgb(204, 34, 71);}
    25%  {color:white;}
    50%  {color:rgb(204, 34, 71);}
    75%  {color:white;}
    100% {color:rgb(204, 34, 71);}
  }
  
  /* Standard syntax */
  @keyframes redText {
    0%   {color:rgb(204, 34, 71);}
    25%  {color:white;}
    50%  {color:rgb(204, 34, 71);}
    75%  {color:white;}
    100% {color:rgb(204, 34, 71);}
  }
  /* end Red text animation*/

El texto comienza en rojo y luego se pone blanco por una duración de 3 segundos (animation-duration: 3s;).

La propiedad animation-iteration-count: infinite; esta definida como “infinite” para que la animacion dure infinitamente.

Código HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Hello, CSS 3</title>
  </head>
  <body>    
    <h1 class="text-center">Hello <b class="redTextAni">CSS 3</b></h1>    
  </body>
</html>

Ahora solo llama a la clase “redTextAni” y cambia las propiedades de la animación y los colores a tu gusto si deseas.

Aqui les dejo el source code por si desean descargarlo.

Si tienes algún “truquito” similar puedes dejar tus conocimientos en los comentarios. Gracias por leer y compartir.

Tags: ,

Deja tus comentarios o preguntas!

This site uses Akismet to reduce spam. Learn how your comment data is processed.