Animaciones y Transformaciones con CSS3

Animaciones y Transformaciones con CSS3

Se puede ver un aumento en el uso de CSS3 en sitios web de amplio uso, y actualmente es un diferencial a la hora de atraer y enganchar al usuario. Aunque sé que es pronto para sumergirse totalmente en estas aguas, no perdemos nada con jugar un poco con transiciones y animaciones en CSS3.


NOTA: Aún es necesario el uso de browsers muy modernos, como Safari 5 y Chrome 10. Firefox 3.6 anda pero no ofrece todo el soporte que quisiéramos (aún).

Transiciones

Su característica es cambiar una propiedad (o un grupo de ellas) en un período de tiempo determinado. Una ventaja por sobre Javascript es su degradación, ya que si esta propiedad no es soportada por el browser, la animación simplemente no es mostrada.

El siguiente código muestra el aumento del ancho de un <div> en un segundo cuando el mouse se posiciona sobre él. Luego, cuando el mouse sale del <div> su ancho vuelve a la posición inicial en 2 segundos:

.prueba1 {
   margin:10px;
   width:200px;
   height:200px;
   background:#f00;
   border:1px solid #666;
   -webkit-transition: all 1s ease; /* Safari-Chrome */
}
   .prueba1:hover{
      width:400px;
      -webkit-transition: all 2s ease; /* Safari-Chrome */
    }

Ver ejemplo 1

A continuación, una animación compuesta: dado un estado inicial se define nuevo width, height y background-color:

.prueba2 {
   margin:10px;
   width:200px;
   height:200px;
   background-color:#f00;
   border:1px solid #666;
   -webkit-transition-property: width, height, background-color;
   -webkit-transition-duration: 0.5s, 1s, 1s;
   -webkit-transition-timing-function: ease, ease-out;
   -webkit-transition-delay:0s ,0.5s, 1.5s;
  }
   .prueba2:hover {
      width:400px;
      height:300px;
      background-color:#fc0;
      -webkit-transition-property: width, height, background-color;
      -webkit-transition-duration: 0.5s, 0.5s, 0.5s;
      -webkit-transition-timing-function: linear, linear;
      -webkit-transition-delay:0s ,0.5s, 0.5s;
   }

Ver ejemplo 2

Propiedades:

transition-property:
Determina la(s) propiedad(es) a ser animadas; puede ser cualquier propiedad CSS.
transition-duration:
Indica la duración de la animació del inicio al fin en segundos. Por defecto el valor es 0.
transition-timing-function:
Definen física de animación: ease (por defecto), linear, ease-in, ease-out y ease-in-out.
transition-delay:
Tiempo en que la animación debe pausarse antes de comenzar.

Transformaciones:

Existen 4 tipos de valores para transformar elementos HTML mediante CSS3:

Skew:
desplazamiento de los ejes horizontales.
Scale:
modificación de la escala del elemento.
Rotate:
cambio de rotación del mismo definido en grados.
Translate:
desplazamiento del elemento desde su posición original.

Ver ejemplo 3

Estas propiedades pueden ser utilizadas en la gran mayoría de los browsers modernos, con sus debidos prefijos como pueden notar en el código fuente del ejemplo.

Además, puedes comenzar a mezclar transformaciones con animaciones para lograr efectos como el siguiente (con Safari/Chrome):

Mouse over para que esto se vuelva loco.
#divloco div {
   height:100px;
   width:100px;
   border:1px solid #f00;
   margin:10px auto;
   background: #ccc;
   text-align:center;
   -webkit-transition: all 2s ease-in-out;
   -moz-transition: all 2s ease-in-out;
   -o-transition: all 2s ease-in-out;
   -ms-transition: all 2s ease-in-out;
   transition: all 2s ease-in-out;
}
   #divloco div:hover, #divloco div.hover_effect {
      -webkit-transform:rotate(720deg) scale(2,2);
      -moz-transform:rotate(720deg) scale(2,2);
      -o-transform:rotate(720deg) scale(2,2);
      -ms-transform:rotate(720deg) scale(2,2);
      transform:rotate(720deg) scale(2,2);
   }

Links:

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

FadeIn/Out en menú con CSS

FadeIn/Out en menú con CSS

Situación: tenemos un menú con N elementos, los cuales se van activando (opacity: 1) a medida que el mouse pasa sobre cada uno, mientras el resto de los elementos permanecen inactivos (opacity: 0.5). Un efecto simple que se puede realizar tranquilamente con CSS y la caída estrepitosa de IE6. Primero, el ejemplo del nunca mal [...]

Desarrollos Web para iPhone

Desde hace unos meses CSSLab tiene un theme especial si entras a través de un iPhone. Y ante la inminente llegada de este codiciado aparato al resto del mundo, he entrado de lleno estudiando desarrollos para esta plataforma. Los aplicativos me la están ganando, ya que se hacen con Objective-C el que no es mi [...]

Más y mejores tipografías con @font-face

Está bien, se están utilizando mucho hoy en día pero @font-face no es una de las nuevas propiedades CSS3; de hecho fue propuesta en CSS2 y ha sido implementada en IE desde su versión 5, aunque lo hicieron en el formato de fuentes propietario (como no, si siempre Microsoft lo hace) Embedded OpenType. Como fueron [...]

  1. En Chrome 8 funcionan las 2 primeras, la última funciona con Chrome 11, no se si con la 10 funciona porque no he podido probarlo.
    Enhorabuena por el blog

    Hector
    01 / Febrero / 2011

  2. hola :)

    muchos manuales
    02 / Febrero / 2011

  3. Que exceso, wuuu, esto está super, no es que sean la gran cosa, pero la simplicidad y la usabilidad son lo maximo…. por este tipo de cosas es que csslab es mi blog favorito….

    Cristopher
    07 / Febrero / 2011

  4. En FF 4 todo parece ok.

    luis
    09 / Febrero / 2011

  5. Todo perfecto muchas gracias. El efecto o script que tienes en todos los cuadros de código de todas tus páginas es jquery? que función es y como se utiliza?

    Mario Cordero Escobar
    15 / Febrero / 2011

  6. El ejemplo 3 lo has enlazado con el ejemplo 1.
    Muchas gracias por tus conociemientos y, sobre todo, por lo bien que los explicas.

    Miguel
    28 / Febrero / 2011

  7. Hola, esta buenísimo el blog.

    Tengo una duda, quisiera hacer una animación al tocar el div, pero después que hizo la transición que el div se quede ahí; en la nueva posición.

    La segunda pregunta es como puedo hacer que algo se anime sin que tenga que ponerme encima del div.

    Gracias por su tiempo.

    Daniel
    17 / Mayo / 2011

  8. excelente el comentario agrege este sitio a mis bookmark para verlo con frecuencia

    yonaides
    06 / Septiembre / 2011

  9. Hola
    tengo una duda con respecto a la propieda rotate, ya que quiero rotar los encabezados de una tabla, pero al aplicar rotate se rota solamente el contenidoy la celda queda del mismo tamao y no se ajusta a la rotacion, como puedo solucionar ese problema?

    Jose
    23 / Enero / 2012

  10. Excelente! A practicar se ha dicho!

    Alessandro Oliviero Degiusti
    24 / Marzo / 2014

  11. alguien sabe como hacer esta funcionalidad de la bici para cambiar de imagenes….
    http://www.myownbike.de/singlespeed-und-fixie-konfigurator

    eloscar
    10 / Julio / 2014

  1. [...] estás haciendo animaciones y transformaciones varias utilizando CSS3, existe un truco para engañar al browser y forzar a que ...
    Aceleración por hardware con CSS3 → CSSLab
  2. [...] estás haciendo animaciones y transformaciones varias utilizando CSS3, existe un truco para engañar al browser y forzar a que ...
    Aceleración por hardware con CSS3 « 35/51 Blog
  3. [...] lo que hacemos es con la propiedad CSS3 transform rotar el elemento -90º, lo escalo un poco para que ...
    Impresión portarretrato con CSS3 → CSSLab

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 57 veces