Transformaciones, transiciones y animaciones CSS3.

Posted on Actualizado enn

En este tutorial traido desde creativasfera vamos a ver las transformaciones de CSS3, así como las transiciones y animaciones de CSS3. Las transformaciones de CSS3 permiten modificar la visualización de los elementos de una página web tanto en 2D como en 3D. Con las transiciones de CSS3 podemos crear exactamente esto, un efecto de transición, de los elementos en la pantalla. Con las animaciones de CSS3 podemos crear muchos efectos con movimiento sin necesidad de JavaScript, uso de frameworks o de la librería jQuery, de aquí su potencia. La combinación de HTML5 con CSS3 y en algunos casos JavaScript (por ejemplo, para el elemento de dibujo canvas), podremos crear sitios de la potencia de Flash, de aquí el declive de esta tecnología en web no optimizada para SEO y su paso a la creación de aplicaciones y juegos para móviles.

Si quieres practicar algunas de las propiedades que aquí veremos, te recomiendo que te descargues gratis esta plantilla de HTML5 con animaciones de CSS3.

animaciones de CSS3

TRANSFORMACIONES, TRANSICIONES Y ANIMACIONES DE CSS3


LAS TRANSFORMACIONES DE CSS3

Las transformaciones de CSS3 pueden ser en 2D y en 3D, siendo estas últimas considerablemente más complejas al tener que tener en cuenta los tres ejes de coordenadas. En este tutorial veremos las transformaciones en 2D. Si te interesan las transformaciones de CSS3 en 3D, te recomiendo este artículo (en inglés). En cualquier caso, en el apartado animaciones de CSS3 de este artículo veremos un ejemplo en 3D.

En este ejemplo podemos ver en qué consisten las transformaciones de CSS3 de rotar, escalar y distorsionar. También hay otras muy usadas como la de trasladar.

Fuente: W3 Schools

De las transformaciones de CSS3 en 2D, las más usadas son:

  • Rotate. Rotate te permite rotar un elemento dándole un ángulo de giro en grados.
  • Scale. Scale te permite escalar un elemento, toma valores positivos y negativos y se le pueden poner decimales.
  • Translate. Translate nos permite trasladar un elemento a la vez en el eje de las X y de las Y, dándole las coordenadas iniciales y finales.

Si no queremos que se aplique ninguna transformación, la propiedad será de none

1 .ejemplo {
2    transform:none;
3 }

LAS ROTACIONES DE CSS3

Como hemos visto, la propiedad de transformación de CSS3 tiene muchas aplicaciones, una de ellas la de rotar un elemento. Se puede aplicar tanto a elemento inline como a elementos de bloque.

Fuente: Smashing Magazine

1 .ejemplo {
2    -webkit-transform: rotate (45deg);
3    -moz-transform: rotate (45deg);
4    -o-transform: rotate (45deg);
5    -ms-transform: rotate (45deg);
6    transform: rotate (45deg);
7     }

Para no estar perdiendo el tiempo creando los prefijos propietarios de navegador, os recomiendo la herramienta gratuita Prefixr

Fíjate que los grados se marcan en positivo si el elemento se rota en el sentido de las agujas del reloj y en negativo si es al revés.

Por defecto, el punto de referencia que toma como eje para hacer la rotación es el centro, pero también se puede especificar otro punto. Aquí un ejemplo en que se traslada el eje de rotación a la parte superior izquierda del elemento:

01 -webkit-transform-origin: left top;
02 -moz-transform-origin: left top;
03 -o-transform-origin: left top;
04 -ms-transform-origin: left top;
05 transform-origin: left top;
06
07 -webkit-transform: rotate (-20deg);
08 -moz-transform: rotate (-20deg);
09 -o-transform: rotate (-20deg);
10 -ms-transform: rotate (-20deg);
11 transform: rotate (-20deg);

La gracia de estas propiedades es que con las animaciones de CSS3 vamos a poder crear efectos visuales muy atractivos.

ESCALAR UN ELEMENTO CON CSS3

Otro punto interesante va a ser escalar un elemento con CSS3.

Fuente: Smashing Magazine

Si el valor es positivo, el elemento se hace más grande, y si es negativo se hace más pequeño. En el siguiente ejemplo, se escalará el elemento multiplicando por dos:

1 -webkit-transform: scale(2);
2 -moz-transform: scale(2);
3 -o-transform: scale(2);
4 -ms-transform: scale(2);
5 transform: scale(2);

También es posible que queramos dar dos valores diferentes según las X y las Y, con lo que creamos un efecto de escala no proporcional que nos da un efecto visual de distorsión.

1 -webkit-transform: scale (.52);
2 -moz-transform: scale (.52);
3 -o-transform: scale (.52);
4 -ms-transform: scale (.52);
5 transform: scale (.52);

Si lo deseamos, podemos aplicar el cambio de escala sólo en una dirección. Utilizamos scaleX para sólo escalar en el eje de las X y ScaleY para sólo escalar en el eje de las Y:

1 -webkit-transform: scaleY(3);
2 -moz-transform: scaleY(3);
3 -o-transform: scaleY(3);
4 -ms-transform: scaleY(3);
5 transform: scaleY(3);

TRASLADAR ELEMENTOS CON CSS3

Este nombre puede llevar a confusión, ya que esta propiedad de CSS3 no hace propiamente una transición, sino que hace que un elemento pase de estar en una posición a estar en otra. Con las transiciones y las animaciones de CSS3 vamos a poder darle un efecto visual de movimiento.

Fuente: Smashing magazine

1 -webkit-transform: translate(10px20px);
2 -moz-transform: translate(10px20px);
3 -o-transform: translate(10px20px);
4 -ms-transform: translate(10px20px);
5 transform: translate(10px20px);

COMBINAR TRANSFORMACIONES

como bien te puedes imaginar, la potencia de las transformaciones, transiciones y animaciones de CSS3 está en combinarlas. Veamos un ejemplo que combina varias transformaciones de CSS3:

01 -webkit-transform: scale(21);
02 -moz-transform: scale(21);
03 -o-transform: scale(21);
04 -ms-transform: scale(21);
05 transform: scale(21);
06
07 -webkit-transform: translate(10px20px);
08 -moz-transform: translate(10px20px);
09 -o-transform: translate(10px20px);
10 -ms-transform: translate(10px20px);
11 transform: translate(10px20px);

LAS TRANSICIONES DE CSS3

Para activar una transición es necesario que se detecte un evento. Por ejemplo con :hover, :active o:focus. Si combinamos las transiciones con las transformaciones de CSS3, daremos un efecto de movimiento.

Veamos un ejemplo:

01 #nav a{
02  background-color:red;
03 }
04
05 #nav a:hover,
06 #nav a:focus{
07  background-color:blue;
08
09 -webkit-transition-property:background-color;
10 -moz-transition-property:background-color;
11 -o-transition-property:background-color;
12 -ms-transition-property:background-color;
13 transition-property:background-color;
14
15 -webkit-transition-duration:2s;
16 -moz-transition-duration:2s;
17 -o-transition-duration:2s;
18 -ms-transition-duration:2s;
19 transition-duration:2s;
20
21 }

En este ejemplo estamos indicando que la propiedad de transición a variar es el color del background y que se tome 2 segundos en hacer progresivamente el cambio de color. Las transiciones de CSS3 pueden tomar estos valores:

  • transition-property
  • transition-duration
  • transition-delay
  • transition-timing-function

LISTA DE VALORES QUE PUEDE TOMAR TRANSITION-PROPERTY

A continuación te dejo una lista con todas las propiedades de las transiciones de CSS3.

  • background-color
  • background-image
  • background-position
  • border-bottom-color
  • border-bottom-width
  • border-color
  • border-left-color
  • border-left-width
  • border-right-color
  • border-right-width
  • border-spacing
  • border-top-color
  • border-top-width
  • border-width
  • bottom
  • color
  • crop
  • font-size
  • font-weight
  • grid-*
  • height
  • left
  • letter-spacing
  • line-height
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline-color
  • outline-offset
  • outline-width
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • right
  • text-indent
  • text-shadow
  • top
  • vertical-align
  • visibility
  • width
  • word-spacing
  • z-index
  • zoom

DURACIÓN DE LA TRANSICIÓN DE CSS3

Con transition-duration especificamos el tiempo que va a tardar la transición. Este tiempo se puede expresar tanto en segundos como en milisegundos. Así, 2.4s y 2400ms tendrán una misma duración

EJEMPLO DE TRANSICIÓN DE DESPLAZAMIENTO

Imaginemos que tenemos un elemento con el id #desplazamiento que queremos mover en la pantalla con las transiciones de CSS3. El modo en que lo haríamos sería el siguiente:

01 #desplazamiento a {
02    positionabsolute;
03    left0;
04
05    -webkit-transition-property: left;
06    -moz-transition-property: left;
07     -o-transition-property: left;
08     -ms-transition-property: left;
09     transition-property: left;
10
11    -webkit-transition-duration: 2s;
12    -moz-transition-duration: 2s;
13    -o-transition-duration: 2s;
14    -ms-transition-duration: 2s;
15    transition-duration: 2s;
16 }
17  
18 #desplazamiento a:hover {
19   left:15px;
20 }

Aquí lo que sucede es que el enlace que contenga el ID desplazamiento se desplazará 15px cuando el usuario pase el ratón por encima. Fíjate que en donde especificamos el valor para el evento, en este caso :hover, sólo decimos el cambio que se hará y el resto de propiedades se especifican en la etiqueta normal. Date cuenta que hemos de especificar dos cosas, el transition-property o la propiedad de transformación y la duración de la misma con transition-duration.

RETRASO EN LA TRANSICIÓN DE CSS3

Con la propiedad transition-delay podemos indicar un tiempo de espera antes de empezar a realizar la transición. Esta propiedad puede tomar tanto valores positivos como negativos. En el caso que le demos un valor negativo, lo que sucede es que la transición tiene lugar en el momento de accionar el evento, lo que empieza en el punto que habría empezado en caso de haberlo hecho en el tiempo indicado. Así, si indico un retraso de -3s y tengo una animación de 10s, en el momento de empezar no lo hará en el segundo 0, sino en el segundo 3.

En el caso de IE y Opera no aceptan valores comprendidos entre los -10ms y los 10ms.

VELOCIDAD DE LA TRANSICIÓN DE CSS3

La propiedad transition-timing-function especifica la velocidad en que se desarrollará la transición, utilizando las llamadas curvas de Bezier. Así, podemos programar la transición para que empiece a una velocidad, luego frene y después se acelere o darle el movimiento que creamos conveniente.

Este punto es quizás el más complejo y existen varias herramientas online para generar las curvas de Bezier. Podemos programarlas nosotros, o darle uno de estos valores: linear, easeease-in, ease-out y ease-in-out. Las curvas de Bezier de estos valores son los que siguen:

curvas de bezier css3

No voy a entrar en las matemáticas detrás de una curva de Bezier, recomiendo que vayas probando o bien utilices una herramienta online que haga el trabajo por ti.

Para más información de las transiciones de CSS3 te recomiendo este excelente artículo de Smashing Magazine. Aquí sólo una cosa más, al igual que con muchas otras propiedades de CSS, podemos poner varios valores en una sola línea. Veamos un ejemplo:

1 .elemento {
2   height100px;
3   transition: height 2s linear;
4 }
5
6 .elemento:hover {
7   height200px;
8 }

LAS ANIMACIONES DE CSS3

Las animaciones de CSS3 son la verdadera potencia del CSS3 en acción. Veamos ahora cómo creamos animaciones de CSS3.

LA CREACIÓN DE ANIMACIONES EN CSS3

Una animación tiene lugar en el tiempo, con lo que vamos a tener que tomar diferentes puntos dentro de un fragmento de tiempo para especificar que sucede en cada uno de ellos. Es lo que se llaman keyframes. Para los que habéis trabajado en Flash u otros programas de animación ya conocéis el concepto. En cada keyframe podemos introducir un cambio y la suma de estos cambios es lo que va a dar lugar a la animación final.

Para indicar la duración de una animación utilizaremos la propiedad animation-duration.

La velocidad de la animación estará gestionado por la propiedad animation-timing-function en la que podremos especificar la curva de Bezier de la animación, tal y como sucedía en las transiciones de CSS3.

También en las animaciones de CSS3 podremos especificar un tiempo de espera antes de iniciar la animación con la propiedad animation-delay.

Con la propiedad animation-direction podremos indicarle que la propiedad se haga en sentido inverso al habitual, es decir, que empiece por el final.

También podemos especificar la de veces que se repetirá la animación con la propiedad animation-iteration-count.

Resumiendo, las propiedades de las animaciones son:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

Para ahorrar tiempo, te recomiendo animate.CSS, con muchas animaciones de CSS3.

EJEMPLO DE UNA ANIMACIÓN EN 3D

Vamos a ver ahora un ejemplo en que aplicamos las animaciones de CSS3 a una transformación en 3D. Este es el ejemplo:

Si lo quieres ver en vivo, lo puedes ver en esta página web.

001 #rotate {
002 margin0 auto;
003 width600px;
004 height400px;
005
006 /* Propiedad que hace el cambio de 2D a 3D */
007 -webkit-transform-style: preserve-3d;
008 -moz-transform-style: preserve-3d;
009 -ms-transform-style: preserve-3d;
010 transform-style: preserve-3d;
011
012
013 /*
014 Animación de CSS3 que hace que utiliza la animación giroX
015 que hace que se gire alrededor del eje de las X 
016 durante 7 segundos y que se ejecuta de manera
017 continua e infinita.
018 */
019
020 -webkit-animation-name: giroX;
021 -moz-animation-name: giroX;
022 -ms-animation-name: giroX;
023 -o-animation-name: giroX;
024 animation-name: giroX;
025
026 animation-duration: 7s;
027 -webkit-animation-iteration-count: infinite;
028 -moz-animation-iteration-count: infinite;
029 -ms-animation-iteration-count: infinite;
030 -o-animation-iteration-count: infinite;
031 animation-iteration-count: infinite;
032
033 -webkit-animation-timing-function: linear;
034 -moz-animation-timing-function: linear;
035 -ms-animation-timing-function: linear;
036 -o-animation-timing-function: linear;
037 animation-timing-function: linear;
038
039 }
040
041
042 /* Aquí es donde definimos la propiedad giroX que vamos a llamar. */
043
044 @keyframes "giroX" {
045  0% {
046     -webkit-transform: rotateX(0deg);
047     -moz-transform: rotateX(0deg);
048     -o-transform: rotateX(0deg);
049     -ms-transform: rotateX(0deg);
050     transform: rotateX(0deg);
051  }
052  50% {
053     -webkit-transform: rotateX(180deg);
054     -moz-transform: rotateX(180deg);
055     -o-transform: rotateX(180deg);
056     -ms-transform: rotateX(180deg);
057     transform: rotateX(180deg);
058  }
059  100% {
060     -webkit-transform: rotateX(360deg);
061     -moz-transform: rotateX(360deg);
062     -o-transform: rotateX(360deg);
063     -ms-transform: rotateX(360deg);
064     transform: rotateX(360deg);
065  }
066
067 }
068
069 @-moz-keyframes giroX {
070  0% {
071    -moz-transform: rotateX(0deg);
072    transform: rotateX(0deg);
073  }
074  50% {
075    -moz-transform: rotateX(180deg);
076    transform: rotateX(180deg);
077  }
078  100% {
079    -moz-transform: rotateX(360deg);
080    transform: rotateX(360deg);
081  }
082
083 }
084
085 @-webkit-keyframes "giroX" {
086  0% {
087    -webkit-transform: rotateX(0deg);
088    transform: rotateX(0deg);
089  }
090  50% {
091    -webkit-transform: rotateX(180deg);
092    transform: rotateX(180deg);
093  }
094  100% {
095    -webkit-transform: rotateX(360deg);
096    transform: rotateX(360deg);
097  }
098
099 }
100
101 @-ms-keyframes "giroX" {
102  0% {
103    -ms-transform: rotateX(0deg);
104    transform: rotateX(0deg);
105  }
106  50% {
107    -ms-transform: rotateX(180deg);
108    transform: rotateX(180deg);
109  }
110  100% {
111    -ms-transform: rotateX(360deg);
112    transform: rotateX(360deg);
113  }
114
115 }
116
117 @-o-keyframes "giroX" {
118  0% {
119    -o-transform: rotateX(0deg);
120    transform: rotateX(0deg);
121  }
122  50% {
123    -o-transform: rotateX(180deg);
124    transform: rotateX(180deg);
125  }
126  100% {
127    -o-transform: rotateX(360deg);
128    transform: rotateX(360deg);
129  }
130
131 }

Para muchos ejemplos de animaciones de CSS3 en 2D te recomiendo este fantástico artículo de Smashing Magazine


HERRAMIENTAS ONLINE

CSS3 Maker
CSS3 Generator
WestCIV Tools


PARA ACABAR..

En este artículo de 2000 palabras hemos visto una introducción a las transformaciones de CSS3, así como a las transiciones y animaciones de CSS3. ¿Las aplicas ya a tus diseños? Si te ha gustado el artículo, deja un comentario aquí o en el original aquí.

Vía http://www.creativasfera.com

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s