Las animaciones y transiciones de CSS nos permiten crear movimiento y cambios de forma gradual en nuestros botones, div y otros elementos de nuestra página web. En este post te voy a enseñar las diferencias entre animaciones y transiciones y cuándo debemos utilizar unas u otras.
Introducción
Un transición ocurre cuando un elemento pasa de un estado a otro a partir de un evento, como por ejemplo :hover. Por lo tanto tendríamos 2 estados. Un estado inicial y un estado final.
Una animación, al contrario, puede tener; cuatro, cinco, veinte o tantos estados como deseemos teniendo un mayor control sobre ella.
La otra diferencia importante es que con transition sólo reproducimos el movimiento o el cambio una vez. Mientras que con las animaciones podemos reproducir los movimientos o cambios infinitamente o el número de veces que queramos.
El código CSS que utilizaremos para trabajar con; transiciones será la propiedad transition, mientras que para trabajar con animaciones utilizaremos la propiedad animation y la regla @keyframes.
Ejemplos
Ejemplo de transition
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#motoTransition{ transform:translateX(0px); transition: none; } .on:checked ~ #motoTransition{ transform:translateX(600px); transition-property: all; transition-duration: 1s; transition-timing-function: ease; /* El código de arriba equivale a: transition: all 1s ease; */ } |
Ejemplo de animación
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.on:checked ~ #motoAnimation{ animation-name: mueveMoto; animation-duration: 3s; animation-iteration-count: infinite; animation-direction: alternate; /* El código de arriba equivale a: animation:mueveMoto 3s ease alternate infinite; */ } @keyframes mueveMoto{ 0%{ transform:translateX(0px)} 25%, 50%{ transform:translateX(150px)} 75%{ transform:translateX(100px)} 100%{transform:translateX(300px)} } |
Como ves, en el caso de la animación podemos definir diferentes estados con la regla @keyframes 0%, 25% – 50%, 75% y 100%. Además podemos añadir retroceso en el movimiento. En caso de las transiciones no.
Ejemplo: Botón con transiciones en CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
a.botonTransition{ display:inline-block; border-radius:8px; padding:10px 16px; background:#CE3570; -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); color:#fff; transition: all 0.40s ease; } a.botonTransition:hover{ display:inline-block; padding:10px 16px; background:#4E1E74; -webkit-box-shadow: 0 0 8px 0 rgba(0,0,0,0.5); box-shadow: 0 0 8px 0 rgba(0,0,0,0.5); transform:scale(1.2); } |
Conclusión: ¿Cuándo utilizar animaciones y transiciones de CSS?
Para crear movimientos simples, con sólo dos estados, utilizaremos transition, por lo general, para todos los botones o elementos que tengan un evento hover vamos a utilizar también transition. Mientras que para animaciones complejas utilizaremos animation.
También te recomiendo este post: Cómo crear una animación con CSS
0 comentarios
Trackbacks/Pingbacks