marquee con CSS3

La marquees o marquesinas in spanish, son una forma de mostrar distinto contenido, desplazándolo en cierta dirección. En HTML es una etiqueta bastante sencilla pero carece de opciones sofisticadas y ese desplazamiento es relativamente abrupto y constante con lo que los textos no suelen ser muy legibles.

Con JavaScript es posible generar cosas similares y desplazar textos de distintos modos pero, hongkiat.com muestra una tercera opción que es generar marquees utilizando sólo CSS.

Claro, aparentemente, si uno lee "utilizando sólo CSS" se imagina que es más sencillito pero, lamentablemente, aunque la idea es sencilla, como se utilizan propiedades que aún no están unificadas en todos los navegadores, es engorroso andar escribiendo cada una de ellas, sobre todo, las que que definen las reglas de las animaciones.

De todos modos, acá vamos ...

El HTML donde colocaremos nuestra marquesina es simple, un DIV con cierta clase donde cada texto se incluye con una etiqueta P y si en el ejemplo uso dos clase simultáneamente es para poder controlar las dos variantes, una se moverá horizontalmente y otra, verticalmente:

<div class="marquee marqueeV">
<p> una línea de texto </p>
<p> otra línea de texto </p>
</div>

¿Por qué sólo pongo dos textos? Este sería el CSS genérico:

/* al contenedor lo dimesionamos tanto en su ancho como su alto */
.marquee {
  border: 1px solid #444;
  border-radius: 5px;
  height: 50px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 500px;
}
/* cada párrafo */
.marquee p {
  color: #FFF;
  font-family: Tahoma, Arial, sans-serif;
  height: 100%;
  line-height: 50px;
  margin: 0;
  position: absolute;
  text-align: center;
  width: 100%;
  -moz-transform:translateX(100%);
  -webkit-transform:translateX(100%);
  transform:translateX(100%);
}

Y ahora, la animación de cada una de las etqieutas P:

.marqueeH p:nth-child(1) {
  -moz-animation: left-one 20s ease infinite;
  -webkit-animation: left-one 20s ease infinite;
  animation: left-one 20s ease infinite;
}
.marqueeH p:nth-child(2) {
  -moz-animation: left-two 20s ease infinite;
  -webkit-animation: left-two 20s ease infinite;
  animation: left-two 20s ease infinite;
}

/* lo molesto es de tener que crear las animaciones para cada navegador */

/* Mozilla */
@-moz-keyframes left-one {
  0%{-moz-transform:translateX(100%);}
  10% {-moz-transform:translateX(0);}
  40% {-moz-transform:translateX(0);}
  50% {-moz-transform:translateX(-100%);}
  100%{-moz-transform:translateX(-100%);}
}
@-moz-keyframes left-two {
  0% {-moz-transform:translateX(100%);}
  50% {-moz-transform:translateX(100%);}
  60% {-moz-transform:translateX(0);}
  90% {-moz-transform:translateX(0);}
  100%{-moz-transform:translateX(-100%);}
}

/* Chrome/Safari */
@-webkit-keyframes left-one {
  0% {-webkit-transform:translateX(100%);}
  10% {-webkit-transform:translateX(0);}
  40% {-webkit-transform:translateX(0);}
  50% {-webkit-transform:translateX(-100%);}
  100%{-webkit-transform:translateX(-100%);}
}
@-webkit-keyframes left-two {
  0% {-webkit-transform:translateX(100%);}
  50% {-webkit-transform:translateX(100%);}
  60% {-webkit-transform:translateX(0);}
  90% {-webkit-transform:translateX(0);}
  100%{-webkit-transform:translateX(-100%);}
}

Donde, la velocidad es controlada por el valor indicado en:

animation: left-two 20s ease infinite;

usando animaciones para crear "marquees" con estilo ...

cada item se encuentra en una etiqueta <p></p>

Animarlo verticalmente es similar, hay que cambiar la clase y luego, crear cada una de las reglas:

<div class="marquee marqueeV">
  .......
</div>

usando animaciones para crear "marquees" con estilo ...

esta otra se mueve verticalmente

.marqueeV p {
  -moz-transform:translateY(-100%);
  -webkit-transform:translateY(-100%);
  transform:translateY(-100%);
}
.marqueeV p:nth-child(1) {
  -moz-animation: down-one 20s ease infinite;
  -webkit-animation: down-one 20s ease infinite;
  animation: down-one 20s ease infinite;
}
.marqueeV p:nth-child(2) {
  -moz-animation: down-two 20s ease infinite;
  -webkit-animation: down-two 20s ease infinite;
  animation: down-two 20s ease infinite;
}
@-moz-keyframes down-one {
  0%{-moz-transform:translateY(-100%);}
  10% {-moz-transform:translateY(0);}
  40% {-moz-transform:translateY(0);}
  50% {-moz-transform:translateY(100%);}
  100%{-moz-transform:translateY(100%);}
}
@-moz-keyframes down-two {
  0% {-moz-transform:translateY(-100%);}
  50% {-moz-transform:translateY(-100%);}
  60% {-moz-transform:translateY(0);}
  90% {-moz-transform:translateY(0);}
  100%{-moz-transform:translateY(100%);}
}
@-webkit-keyframes down-one {
  0% {-webkit-transform:translateY(-100%);}
  10% {-webkit-transform:translateY(0);}
  40% {-webkit-transform:translateY(0);}
  50% {-webkit-transform:translateY(100%);}
  100%{-webkit-transform:translateY(100%);}
}
@-webkit-keyframes down-two {
  0% {-webkit-transform:translateY(-100%);}
  50% {-webkit-transform:translateY(-100%);}
  60% {-webkit-transform:translateY(0);}
  90% {-webkit-transform:translateY(0);}
  100%{-webkit-transform:translateY(100%);}
}