Bienvenido de nuevo a otra entrega del curso CSS, antes que nada, queremos que sepas, que este no es un curso que sigue un lineamiento secuencial, sino, trata de explorar áreas específicas de CSS, que por lo general muchas personas iniciantes, no conocen acerca de determinado tema, es un curso que va directo al grano, si te das cuenta no nos enfocamos en la teoría, sin embargo intentamos explicarte muy resumida, pero claramente cada concepto, ya que es normal que a la mayoría le agobie tanta teoría, sin embargo, te dejamos enlaces a las páginas especializadas de estos temas, sitios como W3School, MDN, o CSSTricks en donde podrás ahondar más en cada tema, ya que estos son sitios especializadas donde se explica con mayor detenimiento todo lo aquí expuesto.
Además de eso, te damos la posibilidad de que puedas experimentar por ti mismo lo que vayas aprendiendo, en cada ejemplo, hacemos uso del editor de CODEPEN de esta manera podrás manipular, probar cada ejemplo, ya que creemos que es una buena manera que de pongas a prueba lo aprendido.
Sin mas que decir, comencemos el curso.
Las transiciones son un tipo de animación de elementos que nos permiten modificar algunos valores predeterminados de los elementos de una forma muy fácil, para que estos puedan tener efectos increibles y que el usuario reciba una buena perspectiva visual cuando entre a nuestra web, Con las transiciones podemos cambiar un comportamiento abstracto, en uno animado y visualmente atractivo.
Las propiedades de las transiciones son prácticamente las mismas de las animaciones
- > transition-property: Nombre de la transición
- > transition-duration: Duración de la transición
- > transition-delay: Retraso que sufrirá la transición antes de comenzar
- > transition-timing-function: Forma en que se comportara la transición, si su salida será lenta, rápida lenta, lenta rápida o continua etc
Hay dos puntos importantes que se deben tomar en cuenta para utilizar las animaciones:
- Duración
- Propiedad a animar
Comentar que de no especificar una duración a la animación, esta no tendrá ningún efecto, esto debido a que el valor por defecto de transition-duration es 0.
Ejemplo 1
En este primer ejemplo cambiaremos el fondo de un elemento div al pasar el puntero sobre él, para ello usaremos la pseudo clase hover y estableceremos una duración de .2 segundos
Ejemplo 2
Ahora cambiaremos el tamaño de un elemento div pasando de medir 100px de alto, pasará a medir 300px de alto, veamos cómo ocurre
Ejemplo3
Ya cambiamos el alto, ahora tratemos de cambiar la anchura de un elemento, estableciendo un ancho de 400px y aplicaremos una transición que disminuya ese tamaño a 200px, con una duración de .5 segundos.
Debemos recordar que la transición solo se realiza cuando se pasa el mouse por sobre el elemento, y regresa a su estado anterior, cuando el mismo se quita de sobre el elemento
Ejemplo 4
En este ejemplo trataremos de cambiar el alto y ancho de un elemento, dando como valores iniciales, 200px de alto y 200px de ancho, y durante la transición, estos valores aumentaran en 100px cada uno, es decir, medirán 300px de ancho y alto respectivamente.Te podría interesar
Curso CSS Grid Paso a Paso
Curso CSS Animaciones Paso a Paso
Curso CSS Flexbox Paso a Paso
Velocidad de la transición
Podemos manejar la velocidad que le aplicamos a una transición, mediante la propiedad transition-timing-function y cuenta con las siguientes propiedades:
ease - Especifica un efecto de transición con un inicio lento, luego rápido, luego finaliza lentamente (Por defecto)
linear - Especifica un efecto de transición con la misma velocidad de principio a fin
ease-in - Especifica un efecto de transición con un inicio lento
ease-out - Especifica un efecto de transición con un final lento
ease-in-out -Eespecifica un efecto de transición con inicio y final lentos
cubic-bezier(n,n,n,n) - Permite definir sus propios valoressi eseas hacer tu transición personalizada de acuerdo a tus necesidades
ejemplo
Te podría interesar
Curso CSS Flexbox Paso a Paso
Retraso de la transición
Hay casos en los que queremos evitar que una transición no se inicie de inmediato, sino unos segundos después de que la página haya cargado.
Para aplicar el efecto de retraso a una transición, utilizamos la propiedad transition-delay la cual nos permite especificar el tiempo de retraso que queramos que la transición contenga, veamos cómo se hace:
Ejemplo
En este ejemplo, cambiaremos el alto de un elemento y el color de fondo y este tendrá un retraso (transition-delay) de 2 segundos.
Ejemplo
En este siguiente ejemplo aplicaremos una transición y a su vez, una transformación (próximamente) a un elemento, el cual girara 180 grados a la derecha y a su vez incrementara su tamaño a 300px * 300px. veamos cómo se hace.
Si eres observador, verás que este último ejemplo utilizamos una única propiedad para crear la transición, esto se debe a que utilizamos el shorthand o atajo de la propiedad transition la cual se denota de la siguiente manera:
transition: <transition-property> | <transition-duration> | <transition-delay> | <transition-timing-function>
esto es igual a:
transition: width 2s 2s ease-in-out
Como puedes observar en una sola línea se especifica una transición para un elemento, veamos con un último ejemplo
Crearemos una transición donde un elemento cambiará su ancho y alto con
distintos tiempos y a su vez, este cambiara su color de fondo, luego
regresará a su estado inicial
De esta manera terminamos este pequeño curso de transiciones en CSS, esperamos que haya sido de valor para ti, continúa esperando mas de esto, y si te sirvio de algo, no olvides compartirlo en tus redes sociales con amigos y conocidos.
Además como siempre te retamos a que experimentes por ti mismo, manipula los ejemplos para que veas por ti mismo lo que pasa, recuerda que si no practicas lo aprendido, es como si nunca su visto, ya que se olvida pronto
hasta la próxima
Redes Sociales