Las transiciones en CSS nos permiten darle vida a los elementos de nuestra página web y enriquecen la experiencia de usuario. Por ello, en este post, te enseñamos cómo funcionan las transiciones en CSS y qué tipos de transiciones existen.
¿Qué son las transiciones en CSS?
Las transiciones en CSS nos permiten hacer cambios en las propiedades de nuestros elementos de una manera simple, dinámica y suave. Aunque estos cambios le dan al elemento una sensación de movimiento que nos hace creer que estamos viendo una animación, debemos tener en cuenta que realmente son transiciones. La diferencia yace en que las transiciones nos permiten pasar de un estado a otro aplicando una función, no transforman el elemento.
De manera sencilla, las transiciones en CSS se aplican al selector que estemos utilizando. Una vez aplicadas, las transiciones hacen que, cuando hay propiedades que varían, estas no tengan un cambio repentino y de golpe. El cambio, entonces, sucederá en función de la transición que hayamos aplicado.
Para usar las transiciones en CSS usamos la propiedad transition. Con esta propiedad podemos establecer tres características.
- La primera característica que definimos con las transiciones en CSS es qué queremos que cambie y la determinamos con la palabra descriptora de la propiedad que va a cambiar (width, border-color, height, etc.) o con la palabra clave all. Esta última hace que la transición se aplique a cualquier cambio que haya en cualquier propiedad.
- La segunda característica de las transiciones a definir es el tiempo que va a tardar la transición en realizarse. La definimos en unidades de segundo.
- Finalmente, con las transiciones en css definimos el tipo de transición que queremos aplicar, con esto nos referimos a la curva de velocidad que aplicaremos. A continuación te explicamos qué tipos de transición existen:
- linear: esta opción determina que la velocidad de la transición será constante. Es decir, será la misma desde el principio hasta el final.
- ease-in: esta opción hace que la transición empiece despacio y vaya acelerándose.
- ease-out: esta opción hace lo contrario que ease-in. Esto quiere decir que la transición empezará rápido y terminará lento.
- ease-in-out: esta opción hace que la transición suceda de una manera mucho más suave, pues empieza y termina lento.
- ease: esta es la opción por defecto cuando eliges una transición en CSS. La opción ease nos permite crear una transición que empieza lento, luego va rápido y termina despacio de nuevo.
- cube-beizer: esta opción nos deja definir los valores de la curva de velocidad cube beizer. Esta curva tiene cuatro valores o puntos clave conocidos como P0, P1, P2 y P3. El valor P0 representa el primer estado y el primer tiempo, mientras que el valor P3 representa el tiempo final. Las palabras clave descritas anteriormente son formas rápidas de crear ciertas curvas en cube-beizer. Es decir, cada palabra clave tiene distintos valores.
Si quieres conocer más sobre los tipos de transiciones en css y curvas de velocidad que existen, al igual que ver las distintas gráficas generadas por cada palabra clave, te invitamos a leer la sección sobre estas funciones en la página oficial de la Mozilla Developer Network. Ten en cuenta que también puedes ver la gráfica de velocidad de tu transición desde el inspector de tu navegador. Desde ahí, también puedes jugar con los valores directamente y ver el cambio en tiempo real de las transiciones.
¿Cómo funcionan las transiciones en CSS?
Como siempre, las transiciones en css son más fácil de entender con un ejemplo. Imagina que queremos desplazar un cuadrado de manera diagonal por la pantalla. En este caso, basta con crear dos clases: una con el elemento original (.original) y otra con el elemento transformado (.desplazado).
Recuerda que puedes cambiar la posición de un elemento usando las transformaciones en CSS. En este caso en particular, podemos usar la propiedad translate para mover el elemento en sus ejes. Con esta información tendríamos las siguientes líneas de código:
.original {
width: 200px
height: 200px
}
.desplazado {
transform: translate (150px, 50px)
Para aplicar la transición basta con insertar la propiedad transition: all 1s ease-in-out al selector de clase .original. Decidimos insertar la palabra clave all en caso de que luego queramos agregar un cambio a otro tipo de propiedades, como, por ejemplo, para generar un cambio de color. Aunque nosotros en el ejemplo hemos decidido que dure un segundo, puedes darle la duración y la curva de velocidad que desees a tus transiciones en CSS.
¿Quieres seguir aprendiendo?
Ahora que sabes cómo funcionan las transiciones en CSS, ¡es el momento de usarlas en tus propias líneas de código y darle vida a los elementos de tu página web! Además de las transiciones, CSS tiene muchas formas de darle movimiento a un sitio web, por lo que todavía te queda mucho que aprender para ser capaz de dominarlo. Por ello, te invitamos a unirte a nuestra formación intensivo Desarrollo Web Full Stack Bootcamp, donde no solo seguirás aprendiendo sobre CSS y HTML, sino que también te formarás respecto a todas las herramientas y lenguajes que necesitas saber para ser un experto en desarrollo web. ¿A qué estás esperando para unirte? ¡No te lo pierdas y apúntate ya!
