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.

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

.ejemplo {    transform:none; }

---

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.

.ejemplo {    -webkit-transform: rotate (45deg);    -moz-transform: rotate (45deg);    -o-transform: rotate (45deg);    -ms-transform: rotate (45deg);    transform: rotate (45deg); }

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:

-webkit-transform-origin: left top; -moz-transform-origin: left top; -o-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -webkit-transform: rotate (-20deg); -moz-transform: rotate (-20deg); -o-transform: rotate (-20deg); -ms-transform: rotate (-20deg); 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.

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:

-webkit-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); -ms-transform: scale(2); 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.

-webkit-transform: scale (.5, 2); -moz-transform: scale (.5, 2); -o-transform: scale (.5, 2); -ms-transform: scale (.5, 2); transform: scale (.5, 2);

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:

-webkit-transform: scaleY(3); -moz-transform: scaleY(3); -o-transform: scaleY(3); -ms-transform: scaleY(3); 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.

-webkit-transform: translate(10px, 20px); -moz-transform: translate(10px, 20px); -o-transform: translate(10px, 20px); -ms-transform: translate(10px, 20px); transform: translate(10px, 20px);

---

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:

-webkit-transform: scale(2, 1); -moz-transform: scale(2, 1); -o-transform: scale(2, 1); -ms-transform: scale(2, 1); transform: scale(2, 1); -webkit-transform: translate(10px, 20px); -moz-transform: translate(10px, 20px); -o-transform: translate(10px, 20px); -ms-transform: translate(10px, 20px); transform: translate(10px, 20px);

---

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:

#nav a{    background-color:red; } #nav a:hover, #nav a:focus{    background-color:blue;   -webkit-transition-property:background-color;   -moz-transition-property:background-color;   -o-transition-property:background-color;   -ms-transition-property:background-color;   transition-property:background-color;   -webkit-transition-duration:2s;   -moz-transition-duration:2s;   -o-transition-duration:2s;   -ms-transition-duration:2s;   transition-duration:2s; }

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.
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:

#desplazamiento a { position: absolute; left: 0; -webkit-transition-property: left; -moz-transition-property: left; -o-transition-property: left; -ms-transition-property: left; transition-property: left; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; -ms-transition-duration: 2s; transition-duration: 2s; } #desplazamiento a:hover { left:15px; }

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, ease, ease-in, ease-out y ease-in-out. Las curvas de Bezier de estos valores son los que siguen:

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:

---

.elemento {    height: 100px;    transition: height 2s linear; } .elemento:hover {    height: 200px; }

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 propiedadanimation-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.
Para muchos ejemplos de animaciones de CSS3 en 2D te recomiendo este fantástico artículo de Smashing Magazine









ARTICULO RECOPILADO DE http://www.esandra.com/transformaciones-css3-transiciones-animaciones-css3

---