Séptimo video/artículo de la serie «Desarrollo de un sitio web paso a paso con HTML5 y CSS3».
Al añadir transiciones y animaciones css3 aportamos un toque sofisticado al diseño y hacemos que los cambios de los contenidos se desarrollen con mayor fluidez.
Si no has visto el sexto video/artículo de la serie, visítalo en este enlace: Desarrollo de un sitio web paso a paso con HTML5 y CSS3: Formularios web. (6/8)
Con animaciones, transiciones y transformaciones CSS, podemos mejorar la experiencia del usuario de nuestros sitios web creando efectos muy atractivos. Pero cuidado, no caigamos en las malas prácticas de la era flash, en la que las webs estaban saturadas de movimientos y efectos que mareaban.
Hace unos años solo teníamos la opción de Javascript para dar dinamismo al HTML, lo que suponía un conocimiento muy amplio de este lenguaje si queríamos que la animación fuera de una mínima calidad.
Ahora con buen gusto y poco esfuerzo podemos mejorar el aspecto de las webs. Por supuesto para hacer animaciones muy elaboradas aún se recurre a JS o Jquery para desarrollar algunos aspectos de la animación.
Ventajas de utilizar CSS para hacer animaciones o transiciones:
- Sólo necesitas HTML y CSS para realizarlas.
- No necesitas Jquery u otras librerías.
- La mayoría de navegadores soportan animaciones, transiciones y transformaciones.
Diferencias entre animación y transición
Puede que te cueste diferenciar entre animación y transición en algunas ocasiones, sobre todo cuando la animación sea sencilla. Y es que ambas permiten cambiar al elemento, de manera progresiva, de un estado (o apariencia) a otro.
Algunas diferencias que pueden ayudarte a decidir usar transición o animación:
- La transición hace el efecto de cambio entre un estado inicial y un estado final. Y la animación permite añadir estados adicionales intermedios.
- La transición necesita evento :hover o :focus para ejecutarse, mientras que la animación puede reproducirse automáticamente.
- La transición sólo se reproduce una vez. La animación puede reproducirse tantas veces como quieras, incluso de forma infinita.
Para entenderlo mejor, veamos que es cada una de ellas.
¿Qué es una transición?
Las transiciones sirven para que el cambio entre el estado inicial y el estado final del elemento se produzca de una forma progresiva, suavizada. Sin la transición, cuando modificas la apariencia del elemento utilizando el pseudoselector :hover, el cambio de produce de forma brusca.
El uso de transiciones aporta elegancia al diseño web y además mejora la experiencia de usuario. Los cambios bruscos no son bien recibidos por los visitantes web.
La transición puede afectar a cualquier propiedad css, incluso a varias a la vez. Además, puedes controlar su duración y con las funciones de tiempo modificar su ritmo o velocidad.
La transición se utiliza habitualmente para realizar cambios de color o de opacidad al colocarnos sobre un elemento.
Por ejemplo:
.boton {
background: blue;
transition: background 1s ease-in;
}
.boton:hover {
background: green;
}
Esta es una transición sencilla en la que el cambio de color de fondo se producirá progresivamente durante 1 segundo.
Para saber más sobre transiciones, visita nuestros cursos de programación, diseño y desarrollo web.
¿Qué es una animación?
Como ya he mencionado, la primera diferencia entre transición y animación es que la animación permite añadir estados intermedios, lo que hace que la animación sea más flexible y potente.
Esto lo podemos hacer dentro de la regla @keyframes, donde iremos estableciendo paradas de tiempo en las que estableceremos los cambios que queremos producir sobre el elemento. Posteriormente, en el selector del elemento al que le queramos aplicar la animación previamente creada, aplicamos las características de animación mediante la propiedad animation.
Además, para ejecutar una animación, no es necesario que el usuario interaccione con el estado del elemento. Como podéis ver en el video que acompaña este artículo, la animación que se ha aplicado sobre la <section> se ejecuta a la vez que carga la página.
Al igual que las transiciones podemos controlar cómo queremos que se ejecute la animación utilizando las propiedades de la animación: duración, función de tiempo y retardo. Y contamos con más propiedades como la dirección en la que se ejecuta, el número de veces que queremos que se reproduzca, como tiene que verse el elemento cuando la animación no se ejecuta y podemos pausar la animación.
Así que ya puedes ver que la animación ofrece más posibilidades.
A continuación, tienes un ejemplo con inicio, final y dos puntos intermedios:
@keyframes mover {
0% {
left: 0;
}
65% {
left: 100px;
}
75% {
left: 50px;
}
100% {
left: 400px;
}
}
Al comienzo el elemento está en la coordenada 0, transcurrido el 65% del tiempo se desplaza 100px hacia la derecha, después retrocede 50px hacia la izquierda y en el final se desplaza hasta 350px más hacia la derecha.
#elemento {
animation: mover 3s 2 alternate forwards;
}
Con las propiedades de la animación le indicamos cual es la animación que queremos aplicar al elemento (nombre de la animación: mover), la duración (3s), las veces que se va a repetir (2), que ejecute la animación en ambos sentidos (alternate) y que se quede como estaba al inicio de la animación (forwards).
Para saber más sobre transiciones, visita nuestros cursos de programación, diseño y desarrollo web.
Conclusión
Como habéis podido ver, conociendo las propiedades de las animaciones y las transiciones sólo hace falta algo de práctica para crear efectos muy atractivos, sin necesidad de recurrir a complicadas programaciones.
Utiliza transiciones para crear cambios suaves y fluidos entre un estado inicial y un estado final del elemento. Utiliza animaciones para crear movimientos más complejos utilizando pasos intermedios y cuando quieras que el control del efecto no necesite la interacción del usuario.
? Añadir al proyecto transiciones y animaciones CSS3, diseño web . Profesora Lara Acebes CIPSA
Próximos artículos/videos de la serie
Video/artículo 8
- En el último video generaré el media query para la adaptación al dispositivo móvil.