Efecto marquee con CSS3

Siguiendo con las pruebas de animación utilizando propiedades CSS3, he encontrado un efecto muy interesante, el efecto de marquilla.... Consiste en una animación simple donde el texto se va desplazando según queramos, lo básico es lo siguiente:

.animacion {
display:block;
width:auto;
height:40px;
position:absolute;
font-family:georgia, serif;
font-size:16px;
line-height:40px;
float:left;
width:auto;
color:#000;
font-weight:bold;
padding:0 10px;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:17s;
-webkit-animation-name: scroll;
}

.animacion a {color:#c00;}

@-webkit-keyframes scroll {
0% {left:90%;}
100% {left:-100%;}
}

.animacion:hover { -webkit-animation-play-state: paused;}

   Con "@-webkit-keyframes" es que definimos el tipo de scroll (movimiento) que realizará, le indicamos que comience desde cero y termine al final del texto (100%), "-webkit-animation-iteration-count", "-webkit-animation-timing-function", "webkit-animation-duration" y "-webkit-animation-name" son las mas importantes, explico lo que hace cada una:

-webkit-animation-iteration-count: para repetir, es quien crea el efecto de que el texto pasa de un lado a otro, si lo dejamos en blanco el texto no se repite.
-webkit-animation-timing-function: para generar el efecto, mas info en wiki (está en inglés).
-webkit-animation-duration: la duración en segundos, mientras menos segundos mas rápida es la transición.
-webkit-animation-name: nombre de la clase contenedora al efecto (en este caso 'scroll').

   Ya con esto solo nos queda la parte de HTML, la cual va así:

Mi Texto

   Y obtendremos como resultado lo siguiente:

Esto es una prueba

   Esto es lo básico y como siempre podemos agregar mas propiedades css, incluso un segundo contenedor para obtener un recuadro en el efecto, el css para el contenedor podría ser el siguiente...

.contenedor {
width:100%;
height:40px;
overflow:hidden;
position:relative;
border:1px solid #aaa;
margin:0 auto;
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-o-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background:#4ad;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}

Probando CSS3. "carlitox en la web".

   Y modificando las propiedades que se mencionaron anteriormente obtendríamos el siguiente resultado, misma clase otro efecto.

@-webkit-keyframes scroll {
0% {left:0;}
50% {left:50%;}
}

Hasta podemos hacer que el texto rebote.
Y seguir utilizando enlaces, "carlitox en la web".

   Incluso, podemos jugar con las propiedades y crear efectos de autoescritura....

Esto solo puedes verlo en navegadores con soporte de CSS3.

Recibe notificaciones por correo