Esta es la primera parte de una guía completa de dos partes para las transiciones. Aquí es donde lo ayudaremos a comenzar con el Duración de la transición de CSS y propiedades de transición de CSS.
Este tutorial lo pondrá en funcionamiento rápidamente y podrá agregar todo tipo de transiciones a sus sitios web y aplicaciones. Luego, en la segunda parte, perfeccionarás tus habilidades y alcanzarás el nivel Jedi.
Así que sigue leyendo, mi padwan…
¿Qué es una transición CSS?
Una transición CSS es la forma más sencilla de crear animaciones en su sitio. Puedes hacer cosas realmente geniales sin una línea de JavaScript, y son muy fáciles de aprender.
Hace muchas lunas, si los desarrolladores web querían animar sus sitios web, todo lo que realmente tenían eran gifs y texto de marquesina. Ahora tenemos transiciones CSS, y todo está bien en el mundo.
Y lo que es realmente increíble es que, para comenzar a funcionar, solo necesita saber acerca de dos propiedades: CSS transición-duración y Propiedad de transición CSS.
¿Qué es la duración de la transición de CSS?
Transition-duration es la propiedad CSS que controla cuánto tiempo debe tomar la transición de un estado a otro. Entonces, si desea cambiar el color de fondo de un elemento, la duración de la transición hará que el cambio ocurra gradualmente, desvaneciéndose suavemente de un color a otro.
El valor predeterminado para la duración de la transición es 0: el elemento se ajustará instantáneamente del primer estado al segundo. Entonces, en cierto sentido, la duración de la transición es la propiedad principal de la transición: sin ella, nada funciona.
Por ejemplo, imagine que desea crear un botón “Enviar” y hacer que cambie de color cuando alguien pase el mouse sobre él. Podrías hacerlo así:
Primero, cree un elemento de botón…
<button>Submit</button>
Luego espolvorea un poco de CSS…
button {
border: 3px solid #F4D06F;
border-radius: 10px;
width: 100px;
height: 50px;
font-family: sans-serif;
font-size: 20px;
background: #392f5a;
color: #F4D06F;
}button:hover {
background: #F4D06F;
color: #392f5a;
}
Y obtienes este efecto de desplazamiento básico:
Cambiamos las propiedades de fondo y color usando el selector :hover, de modo que cuando pasa el mouse sobre el botón, se aplican estas propiedades. Pero como era de esperar, el cambio ocurre instantáneamente. Es un poco discordante.
Cómo usar la duración de la transición CSS
Crear la transición solo requiere una línea de código, agregada al CSS para el botón. Su sintaxis es bastante simple:
transition-duration: 1s;
Lo que crea lo siguiente:
¡Mucho más bonito!
Por supuesto, puede hacer que la transición dure todo el tiempo que desee. Puede usar fracciones de segundo, como 0,5 s, 0,1 s o milisegundos, por ejemplo, 300 ms, 500 ms. Entonces, .25s y 250ms crean el mismo resultado.
Prueba a editar el lápiz y establece algunos valores diferentes: 0,1 s, 0,5 s, 3 s… ¿cuál crees que funciona mejor?
CSS Transition-Duration Transiciones todo!
Una cosa a tener en cuenta: de forma predeterminada, la duración de la transición afecta todo.
Pongámonos locos y agreguemos una carga más de propiedades al estado de desplazamiento de nuestro botón en nuestro ejemplo:
button:hover {
background: #F4D06F;
color: #392f5a;
width: 200px;
height: 100px;
font-size: 30px;
transform: rotate(360deg);
}Esto resultará así:
¡No no no! Esa duración de transición de 1 segundo se aplicó a cada propiedad que cambiamos. ¡Esto es demasiado!
Necesitamos ser más precisos sobre a qué propiedades hacemos la transición. La mejor manera de hacer esto es limitar la cantidad de propiedades que cambiamos (en este ejemplo, eso significaría poner menos propiedades en el selector flotante).
Pero, ¿qué sucede si desea cambiar algunos estados al instante y hacer la transición de otros gradualmente? Bueno, ahí es donde entra la propiedad de transición CSS…
Propiedad de transición CSS
La propiedad de transición le permite controlar qué propiedades de CSS se animarán cuando establezca una duración de transición.
Simplemente enumere las propiedades que desea cambiar, separadas por comas. He aquí un ejemplo de la sintaxis:
transition-duration: 1s;
transition-property: background, color;
Esto hará que el fondo y el color cambien en 1 segundo, pero no se cambiará nada más. Eso crea este resultado:
Observe cómo el ancho, el alto y el tamaño de fuente cambian instantáneamente. Y no vemos la rotación en absoluto: dado que rotamos 360 grados, terminamos donde comenzamos.
Si se pregunta exactamente qué propiedades puede animar con la propiedad de transición CSS, Mozilla tiene una guía para eso aquí.
Uso de diferentes duraciones de transición
Si desea cambiar diferentes propiedades a diferentes velocidades, puede hacerlo. Echale un vistazo a éste ejemplo:
transition-duration: 1s, 2s;
transition-property: background, color;
Aquí los 1 se aplicarán al fondo y los 2 se aplicarán al color.
Si tiene más propiedades que duraciones, el navegador simplemente repetirá sus valores de duración. Así que esto:
transition-property: background, color, width, height;
transition-duration: 1s, 2s;
Es equivalente a lo siguiente:
transition-property: background, color, width, height;
transition-duration: 1s, 2s, 1s, 2s;
Combinando transición-duración y transición-propiedad
El código anterior, aunque funcional, no es increíblemente legible y es difícil de mantener.
Por ejemplo, ¿qué pasaría si ya no quisiera cambiar el ancho?
Tendría que eliminar el ancho de la propiedad de transición, recordando que era el tercer elemento de la lista, y luego eliminar la tercera duración de la lista de duración de transición. ¡Eso es mucho trabajo!
Una mejor manera es combinarlos en una sola propiedad de transición:
transition: background 1s, color 2s, width 1s, height 2s;
Esto hace exactamente lo mismo, pero es mucho más fácil de leer y mantener.
Si está seguro de que ha configurado correctamente todos los cambios de estado, puede usar todo con transición para aplicar la duración a todas las propiedades:
transition: all 2s;
Ejemplos de transición-duración
Puede aplicar transiciones a casi todas las propiedades de CSS, como escalar, transformar (escala, rotar, traducir, traducir3d), color, posición, zoom, etc.
Aquí hay algunos ejemplos donde podemos ver cómo aplicar su sintaxis:
Escala
Podemos aumentar o disminuir el tamaño de un elemento usando la transformación de propiedades CSS. La escala es uno de los tipos de transformación que podemos aplicar a cualquier elemento.
Aquí hay un ejemplo:
Observe cómo estamos escalando el botón de 1 (valor predeterminado) a 1.5 usando transform: scale(1.5) en el botón: estado de desplazamiento.
También estamos usando en este caso la propiedad de transición: transform; para un mejor rendimiento. Pero si no te preocupas demasiado por eso, puedes usar la propiedad de transición: todos;.
Las partes clave en el código CSS son estas:
La parte más importante del código es esta:
button {
transition-duration: 1s;
transition-property: transform;
}
button:hover {
transform: scale(1.5)
}
Girar
De la misma manera, CSS transform nos permite transformar el elemento al rotarlo en el plano bidimensional.
La propiedad de rotación utiliza unidades de grados. Por ejemplo, transformar: rotar (45 grados). Podemos usar valores positivos o negativos. Entonces, 90 grados rotará el elemento en el sentido de las agujas del reloj y -90 grados en la dirección opuesta.
Aquí hay un ejemplo de trabajo en el que rotaremos el botón.
La parte más importante del código es esta:
button {
transition-duration: 1s;
transition-property: background, color;
}button:hover {
transform: rotate(360deg);
}
Incluso podría ir más lejos aquí y usar las funciones de rotar Y, rotar X o rotar Z.
Traducir
Translate, como su propio nombre lo describe, nos proporciona una forma de trasladar o mover el elemento en el plano bidimensional.
Por ejemplo transform: translate(40px, 20px) movería nuestro elemento 10px en el eje X/horizontal y 20px en el eje Y/vertical.
Puede elegir mover el elemento solo en el eje X o en el eje Y. En ese caso, puede usar 0 para el otro parámetro. Por ejemplo transform: translate(40px, 0) solo moverá el elemento 40px horizontalmente.
También se permiten valores negativos.
Traducir3d
Esta función de transformación funciona de la misma manera que traducir pero nos permite mover elementos en el plano 3D.
Ahora podemos mover elementos en los ejes X, Y y Z, donde Z es la coordenada que nos dará una sensación de profundidad.
Lo entenderás mejor con un ejemplo:
También hemos agregado la función de perspectiva para que esto sea mucho más obvio:
button {transition-duration: 1s;
transition-property: transform;
}
button:hover {
transform: perspective(500px) translate3d(40px, 20px, -800px)
}
Sesgar
La función de sesgo nos proporciona una forma de deformar o inclinar el elemento en una o varias direcciones.
Su sintaxis usa la unidad de grados de la misma manera que lo hacemos con la rotación. Por ejemplo transform: skewX(-25deg); sesgará el elemento en el eje X:
button:hover {
transform: skew(-25deg)
}El siguiente paso: transiciones CSS avanzadas
Por lo tanto, la duración de transición y la propiedad de transición de CSS son los dos elementos clave para comenzar con las transiciones: puede hacer mucho con estos dos, ¡así que un gran trabajo para llegar tan lejos!
¡Pero no estarías leyendo una guía completa de transiciones CSS si no hubiera más!
De hecho, esa propiedad de transición en realidad combina otras dos propiedades de transición de CSS también, y las dominará en la parte 2: función de sincronización de transición de CSS y retraso de transición, donde explicamos cómo usar la linealidad, facilidad, facilidad de entrada, Funciones de temporización de facilidad de salida y entrada.
Mientras tanto, ¿qué tal un poco de inspiración? ¿Ha visto las transiciones y animaciones que puede usar en fullPage.js?
Por ejemplo, ¿qué tal el efecto del agua? ¿O el efecto gota? fullPage.js es una biblioteca JS que canta y baila todo lo que te permite crear increíbles sitios de página completa, con toneladas de transiciones que puedes usar para pasar de una página a otra.
También es muy fácil de configurar y usar, así que pruébalo, ¡a ver qué te parece!
Artículos relacionados
Sobre el Autor:
warren davies es un desarrollador front-end con sede en el Reino Unido.
Puedes encontrar más de él en https://warrendavies.net
