Animaciones CSS3 avanzadas

21/jun/2011 37

He estado impaciente para darme la libertad de investigar y escribir algo más avanzado utilizando CSS3 y animaciones, ya que el soporte de ciertas propiedades están más extendidas y si las comenzamos a utilizar en nuestros proyectos podemos forzar un poco la adaptación de estos nuevos estándares. Mi idea no es utilizarlas aún al 100%, sino que entregando una alternativa para navegadores menos avanzados en estas propiedades (existen algunos frameworks que lo están permitiendo, ver enlaces al final).

En este artículo les mostraré un par de propiedades que pueden marcar la diferencia ente lo que pensabas conocer sobre CSS y lo que se pretende sea la capacidad nativa de los browsers de permitirnos interacciones mucho más ricas y lo mejor, y más rápidas.

* He intentado sin buenos frutos hacer andar por lo menos un par de ejemplos en IE9 y no hay caso, seguiré investigando

Transiciones 4+ & Mobile11+11+5+

La propiedad transition-duration define el tiempo de duración total de una transición de un estado A a uno B, sea el que sea el estilo que estamos dando.

Ya la propiedad transition-timing-function define el rango el cual la transición ocurre, lo que puede incluir aceleraciones o desaceleraciones. Básicamente, describe cómo la animación ocurre durante el tiempo definido en transition-duration.

En el siguiente ejemplo las 3 cajas tienen la misma transformación, pero usan diferentes valores para transition-timing-function:

Ver ejemplo 1

En el siguiente ejemplo, haremos intervalos de medio segundo (0.5s) en la ejecución de un estilo através de la propiedad transition-duration:

Ver ejemplo 2

Transformaciones 3D 4+ & Mobile11+

Este tipo de propiedades aún tienen un soporte limitado (browsers Webkit principalmente, incluyendo móviles) pero se espera que pronto se amplíe (por eso me doy el tiempo de considerarlo en este artículo). El principio básico es el keyframe, y si has usado Flash u otra herramienta de animación (Live Motion, After Effects) comprenderás este concepto:


Un keyframe define el estilo que será aplicado en ese momento dentro de un lapso de animación. El motor de animación del browser interpolará los estilos definidos entre esos keyframes.

Veamos un ejemplo: comenzamos por definir una rotación, dándole un nombre y un comportamiento:

@-webkit-keyframes girando {
  from { -webkit-transform: rotateY(0deg);    }
  to   { -webkit-transform: rotateY(-360deg); }
}

Acabamos de crear un comportamiento para un keyframe y lo llamamos girando. La animación se moverá y rotará en relacion al contenedor que determinemos ahora:

#contenedor {
   margin: 30px auto;
   -webkit-perspective: 600px;
}

Con -webkit-perspective definimos el movimiento del elemento en 3D en el eje Z (creando el efecto de profundidad), el que no puede ser definido antes con el simple CSS2 (ya que es sólo 2D).

Ahora integramos el keyframe con el contenedor, además de agregar el tiempo de duración de la animación:

#girando {
   -webkit-animation-name: girando;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-duration: 3s;
   -webkit-transform-style: preserve-3d;
}

Ver ejemplo 3

Ejemplo 3 CSS3 Avanzado en CSSLab.cl

Para girar un grupo de elementos que se posicionan dentro de otro, debemos posicionar estos elementos de manera absoluta y girar cada uno en grados según la cantidad de elementos que sean. La magia no sólo está en estas nuevas propiedades que entrega Webkit, sino que además en las que CSS3 trae como box-shadow, rgba y text-shadow:

Ver ejemplo 4

Interesante es lo que puedes lograr agregando la propiedad:

-webkit-backface-visibility: hidden;

Donde se oculta la cara del elemento que está al contrario dado el efecto 3D; con esto podemos disminuir la carga del procesador del computador al renderizar esta parte del elemento HTML:

Ver ejemplo 4.1

Cambiamos un poco el código para poder hacer rotar un cubo; verás que los únicos cambios han sido meramente estéticos y de rotación del elemento con translateZ(90px). Además, agregamos la animación por lapsus de tiempo, con la cual podremos hacer pausas y definir cuánto y qué cosas se moverán en tales instantes:

@-webkit-keyframes girando {
   from,20% 	{ -webkit-transform: rotateY(0deg);   }
   30%,40%  	{ -webkit-transform: rotateY(90deg);  }
   50%,60%  	{ -webkit-transform: rotateY(180deg); }
   70%,80% 	{ -webkit-transform: rotateY(270deg); }
   90%,to	{ -webkit-transform: rotateY(360deg); }
}

Ver ejemplo 5

Y para el final, una integración del cubo rotundo anterior con vídeos através de HTML5, en los que puedes ver tienen una gran performance ya que son propiedades nativas (Chrome / Safari):

Ver ejemplo 6

Siento que estamos presenciando un cambio en el paradigma donde la capa de presentación se está uniendo con la de interacción o lo que es mejor, una redefinición de desarrollo front-end. Si no te has aventurado en el código fuente, es mejor apurarte ya que la máquina está a toda velocidad.

Links:

Comentarios

  1. VargasMolina [#]

    Los ejemplos están muy buenos pena es el hecho que no se puedan aplicar en un ambiente de producción donde actualmente hay una guerra debido a que no existe un estándar para todos los browser .

    Pero eso demuestra que este reportaje esta avanzado en el tiempo (2011).. tal vez en 2 años mas sea rutinario ver esta clase de animación en paginas web .

  2. Juan Torres [#]

    Ya que por twitter aparecieron las quejas por la falta de comentarios, hago mi micro-comentario…

    Todos estos efectos los encuentro geniales, ya que ante la necesidad, lo único que se me hubiese ocurrido era un “lindo” flash; ahora el tema pasa por la arista de que no tendría ningún proyecto en donde colocar este tipo de efectos.

    Pero como siempre super agradecido por estos tremendos datos !!!

  3. Jorge Epuñan [#]

    Gracias VargasMolina y Juan Torres, estaba preocupado ya porq nadie comentaba nada, pensé q no fue util este articulo pero como dicen puede q este un poco adelantado. Pero bueno, no pierden nada con ir probando y jugando, esa es la idea yo me divertí bastante espero puedan tb pasar un buen rato dejando sus imaginaciones libres para crear sin pensar en el soporte.

  4. crisboot [#]

    Muy bueno!!

  5. igualacero [#]

    Es el futuro de la web y encima sigue siendo contenido semántico para los buscadores.

  6. N. » Blog Archive » Weekly Twitter Log (2011/8/13 – 8/19) [#]

    […] css3アニメーションのデモ集。 […]

  7. Gabriel [#]

    Excelentes ejemplos.

  8. José Luis Pizarro Feo [#]

    Si están genial, pero mientras los navegadores no tengan una línea firme respecto a los estándares pero sobre todo exista un amplio margen de la población utilizando versiones antiguas de los mismos (tipo IE6) poco se puede hacer. Para experimentar genial eso sí.

  9. Sergio [#]

    Hola! gran artículo pero de momento no me arriesgo a introducir este tipo de efectos. Seguiré con lo seguro, que se vea en todos los navegadores.

  10. Mrcss [#]

    me gustaron..buen aporte

  11. vattenpipa [#]

    Really nice effects!

  12. Jluis [#]

    Muy padre tu blogs y tus tips !!!

  13. Sv [#]

    Estan wenisimos los ejemplos

  14. Liliana [#]

    Excelente tus ejemplos. Me encantan. Sigue adelante!!!

  15. Experimento: rotación oblícua con CSS3 → CSSLab [#]

    […] Pero la magia está en la animación con CSS3: […]

  16. martin [#]

    Hola, me encantaron tus ejemplos. Personalmente no creo que tarde mucho en utilizarse css3 en los diferentes navegadores, ya que los mas utilizados (incluso Internet explorer) lo estan comenzando a soportar. Igualmente y gracias a Dios existe PREFIX-FREE! que nos facilita el tema de los prefijos. Desde ya gracias por los ejemplos.

  17. Ventura Rodriguez [#]

    Vaya que bueno, estupenda lista de animaciones en CSS3. La que mas de utilidad es la primera de todas. Saludos.

  18. html5 | Pearltrees [#]

    […] Animaciones CSS3 avanzadas Every aspiring Web developer should know about the power of JavaScript and how it can be used to enhance the ways in which people see and interact with Web pages. Fortunately, to help us be more productive, we can use the power of JavaScript libraries, and in this article we will take a good look at jQuery in action. What Is jQuery? In a nutshell, jQuery is a leading JavaScript library that can perform wonders on your Web pages and make your Web development life much easier and more enjoyable. […]

  19. Jorge [#]

    Buena colección de animaciones.
    Consulta: estoy haciendo una animación con @keyframes. Lo que deseo lograr es que un div de la izq. y otro ubicado en la derecha se junten en medio de la pagina. logro el resultado pero no deseo que al finalizar la animación los divs vuelvan a su estado inicial, sino que queden en su último estado, es decir juntos en medio de la pantalla (o la página)

    Este es el código de las animaciones de ambos divs. Un div está en el extremo izquierdo (kuarto) y el otro en el extremo derecho (yena).
    @keyframes kuarto
    {
    from {left: -320px;}
    to {left: 500px;}
    }
    @-webkit-keyframes kuarto
    {
    from {left: -320px;}
    to {left: 500px;}
    }
    @-webkit-keyframes yena
    {
    from {right: -320px;}
    to {right: 540px;}
    }

    —> Agradecido de ante mano

  20. Jorge Epuñan [#]

    Jorge: donde definas las animaciones, agrega que no se repita, osea:

    animation-iteration-count: 1;

    Con eso se quedará en la ultima propiedad que definiste, en to.

  21. SirOne Encore 2002 [#]

    Muy interesante las diferentes aplicaciones que se les puede dar a las animaciones con CSS3. Veré cómo aplico algo así en el proyecto que estoy desarrollando!

    Gracias por la info!!!

  22. lord megabite [#]

    me parece un articulo muy interesante y de lo mejorcito que hay en la red . Y otra cosa esta web es un ejemplo de diseño de los headers asta el footer jjejejejje

  23. Animaciones CSS3 al fin del ciclo ↝ CSSLab [#]

    […] CSS3 muy tímida y poco manejada pero que cumple un papel esencial cuando estamos trabajando con animaciones CSS3. Supongamos que estamos creando una animación simple, que no necesitamos sea cíclica, por lo […]

  24. Juan [#]

    Muchas gracias, me ha servido de mucho!

  25. Programador [#]

    Esta página es muy buena 😀 esas animaciones me han dejado boquiabierto jajajaj muy buenos aportes sigan así.

  26. Isma [#]

    Buen post, cual es la imagen que ocupas en tu cabecera? parece como si hubiese lineas moviéndose, me gusto mucho :)

  27. santos [#]

    Excelente post, veo algo que me interesa también y me gusto mucho podría preguntarte por el menú que tienes “menu hamburgesa CSSLab”

  28. Nayeli [#]

    Hola!!
    Cómo le agrego imágenes al efecto de la figura 4

  29. Der B. Abed [#]

    buen día, estoy buscando la manera de hacer o mejor dicho conocer el secreto de la animación cíclica avanzada, no uso el programa, pero me gustaría una guía de como poder hacerlo en vídeo o secuencia de imágenes no importa,..
    soy animador 2d, pero no doy en la tecla aun con respecto a este tema.. y para ser mas especifico, no es secuencia de movimiento de personajes etc,.. si no mas bien efectos, o partículas, una cascada y cosas así,.. si sabes algo de eso te lo agradecería mucho una guía.. se que no es el lugar para preguntar esto, pero no se mas a donde ir..

  30. Yhair D. Cruz [#]

    Buen día

    Estoy comenzando en el mundo del CSS y quisiera saber si el efecto que tienen ustedes de pasar el cursor y se vea como los puntos se unen en una especie de constelación ¿se puede hacer con css’ o ¿que se necesita para poder hacer ese efecto? de antemano agradezco su apoyo.

  31. samuel [#]

    Muy buenos tutoriales!

  32. CSS. Animaciones – Informática en el Joanot [#]

    […] Animaciones avanzadas en csslab.cl […]

Responder a html5 | Pearltrees ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab