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

Animaciones CSS3 al fin del ciclo

Animaciones CSS3 al fin del ciclo

Existe una propiedad 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 tanto, la ejecutaremos sólo 1 vez. La escribimos y la aplicamos, como a continuación: /* creando la animación */ @keyframes [...]

Parallax en uso real

Luego del anterior artículo develando cómo se realiza el efecto Parallax con CSS, surgieron dudas de su real aplicación en proyectos web. Así como se presentó no tiene mucho sentido, y como mencioné, es difícil verlo aplicado sin que se note el efecto que produce (ya que el usuario no suele modificar el tamaño de [...]

CSS3: calc()

CSS3: calc()

Calc() es una propiedad CSS3 que permite realizar operaciones matemáticas simples sustituyendo un valor fijo por una expresión dinámica de medida, por ejemplo, sumando o dividiendo anchos de un contenedor. Lamentablemente con calc() no podemos trabajar con valores expresados en otras propiedades (como las útiles variables de preprocesadores CSS), sino que se deben trabajar con [...]

  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