He notado en los comentarios de otras publicaciones recientemente que a algunos lectores les gustarían más artículos de «consejos y trucos», particularmente sobre CSS. Entonces, en la publicación de hoy, proporcionaré lo que espero sea una introducción útil a algunos «trucos» de CSS que se pueden usar para crear microinteracciones convincentes en su sitio web. Específicamente, aprenderemos cómo crear transiciones y animaciones CSS3. También hablaremos sobre cuándo y dónde puede querer usarlos.
La evolución de CSS a lo largo de los años ha llevado a algunas innovaciones realmente asombrosas dentro del lenguaje. En el caso de las transiciones y animaciones, lo que antes requería un programa como Adobe Flash u otro lenguaje de codificación (como Javascript) ahora es posible con nada más que HTML y CSS.
Este tipo de madurez del lenguaje, habilitada por mejores navegadores y estándares web más altos (entre otras cosas), ha sido una gran ayuda para los diseñadores web que también actúan como desarrolladores front-end. Ahora pueden hacer más con menos y todo el proceso de diseño/desarrollo web se ha vuelto un poco más fácil.
Sin embargo, las transiciones y animaciones CSS todavía se consideran usos avanzados de CSS. Un espectro de codificación del que trato de mantenerme alejado en la mayoría de mis artículos, ya que no me considero un «desarrollador avanzado», incluso en un lenguaje tan accesible como HTML o CSS.
Sin embargo, dicho esto, después de leer en W3Schools y en otros lugares, creo que una introducción suficientemente simple a estos conceptos está al alcance no solo de mí, sino también de una buena parte de los lectores de Elegant Themes.
Para comenzar, creo que debemos tener una muy buena idea de qué son exactamente las transiciones y animaciones CSS antes de pasar a los ejemplos y el código.
Transiciones CSS
Una transición de CSS le permite cambiar los valores de las propiedades de un elemento durante una duración determinada que establezca. Para crear una transición, primero debe identificar a qué propiedad CSS desea agregar un efecto y luego especificar la duración del efecto. Si no se establece una duración, la transición no ocurrirá.
Hay cuatro propiedades de transición:
transición-retraso : especifica el retraso, en segundos (s), que le gustaría asignar a su efecto de transición.
transición-duración : especifica la duración, en segundos (s) o milisegundos (ms), que le gustaría asignar a su efecto de transición.
propiedad de transición : especifica el nombre de la propiedad CSS para la que está destinado el efecto de transición.
Transition-timing-function : especifica la curva de velocidad del efecto de transición. Es decir, el tipo de variación de velocidad que desea seleccionar para su efecto de transición. No hay opciones «rápidas» o «lentas». En cambio, hay opciones de curva de velocidad que van de una velocidad a otra. Como «facilidad», que le dice a su efecto que comience lentamente, luego vaya rápido y luego termine lentamente.
Para crear una transición, solo necesita cambiar una de estas propiedades durante la duración que elija. Sin embargo, es posible cambiar más de una propiedad al mismo tiempo; resultando en transiciones más dramáticas.
Animaciones CSS
Mientras que las transiciones CSS tienen que ver con alterar las propiedades de los elementos a medida que pasan de un estado a otro, las animaciones CSS dependen de los fotogramas clave y las propiedades de la animación.
fotogramas clave : los fotogramas clave se utilizan para definir los estilos que tendrá un elemento en varios momentos.
propiedades de animación : las propiedades de animación se utilizan para asignar @keyframes a un elemento específico y determinar cómo se anima.
Hay ocho propiedades de animación:
animation-delay : especifica un retraso para el inicio de una animación.
animation-direction : especifica si una animación debe reproducirse en dirección inversa o en ciclos alternos.
animation-duration : especifica cuántos segundos o milisegundos tarda una animación en completar un ciclo.
modo de relleno de animación : especifica un estilo para el elemento cuando la animación no se está reproduciendo. Como cuando está terminado o cuando tiene un retraso.
animation-iteration-count : especifica el número de veces que se debe reproducir una animación.
animation-name : especifica el nombre de la animación @keyframes.
animation-play-state : especifica si la animación se está ejecutando o está en pausa.
animation-timing-function : especifica la curva de velocidad de la animación.
Los ejemplos a continuación le mostrarán cómo estas cosas se usan juntas de varias maneras. Una vez que comprenda las relaciones entre ellos, podrá descubrir todo tipo de formas interesantes de usarlos.
Una nota rápida sobre los prefijos de proveedores
En su uso personal de transiciones y animaciones CSS, lo más probable es que necesite usar prefijos de proveedores. En parte del código a continuación, sin duda notará algunos prefijos de proveedores. Muchos de los ejemplos de origen no contienen prefijos de proveedores, por lo que si desea ver cómo se ve el código sin ellos, puede consultar allí; Pensé que podría ser útil proporcionar una imagen más completa.
Para los no iniciados, cuando digo «prefijo de proveedor» me refiero a un prefijo que debe agregarse a su CSS en función de la gama de navegadores que desea que admitan sus transiciones y animaciones.
Un buen recurso para identificar los prefijos necesarios para cada navegador es caniuse.com . También puede consultar las páginas respectivas de transiciones y animaciones en W3Schools. O, si desea evitar por completo el desorden de los prefijos, puede usar una herramienta como Bourbon.io .
Ejemplos de transición de CSS
Los ejemplos de transición de CSS a continuación son todas las transiciones que encontré de varias fuentes que muestran lo que es posible con estas capacidades de CSS relativamente nuevas. Elegí recrear los ejemplos que encontré usando CodePen para que pueda ver fácilmente el HTML y CSS requerido para cada ejemplo mientras lo ve en acción
1. Lineal
Ejemplo vía .
2. Girar
Ejemplo vía .
3. Color
Ejemplo vía .
4. Cuadrado a círculo
Ejemplo vía .
5. Tarjeta
Ejemplo vía .
Ejemplos de animación CSS
Nuevamente, los ejemplos de animación CSS a continuación provienen de varias fuentes en la web. Al igual que arriba, CodePen le permite ver la animación y el código requerido en un solo lugar. También puede seguir mis enlaces de origen para obtener más información (en algunos casos) sobre cada ejemplo.
1. Pulso
Ejemplo vía.
2. Agitar
Ejemplo vía.
3. Rebotando
Ejemplo vía .
4. Rebote
Ejemplo vía .
5. Barra lineal
Ejemplo vía.
Posibles casos de uso para transiciones y animaciones CSS
Como mencioné anteriormente, las transiciones y animaciones CSS son ideales para crear microinteracciones atractivas y agradables en su sitio web. Una gran cantidad de excelentes temas y complementos de WordPress vienen con algunos de estos comportamientos en su lugar. Un buen ejemplo es Divi Builder , que le permite controlar transiciones y animaciones dentro de los controles de su módulo.
Sin embargo, es posible que desee tomar los conceptos básicos anteriores y aplicarlos en otras áreas de su sitio en las que el autor de un tema o complemento no le ha dado un control fácil. Las siguientes ideas pueden ayudarlo a comenzar.
- Un formulario de suscripción de correo electrónico que hace una entrada encantadora y existe; como rebotar y cerrarse para desaparecer.
- Un formulario que tiembla cuando la información esencial no está y alguien intenta enviarlo como terminado.
- Botones que se abren, rebotan, se agitan o de alguna otra manera responden al movimiento y al hacer clic.
- Obtenga una vista previa de las imágenes que se giran para revelar más información.
- Gráficos de fondo sutiles que se mueven, creando profundidad.
- Hermosos gráficos que entran en acción a medida que se cargan.
- Experimentos de estilo Google Doodle, logotipos y más.
- Juegos (para los realmente ambiciosos).
- Anuncios con los que puede interactuar o que cambian sutilmente de forma para llamar la atención.
- Hermosas pantallas de productos que giran y responden al mouse.
- Hermosos contadores de estadísticas.
- Y cualquier otra cosa que tu imaginación pueda pensar.
Muestras inspiradoras de transiciones y animaciones CSS
Si necesita más estímulo visual que una lista de ideas, me he tomado la libertad de compilar una muestra pequeña pero impresionante de transiciones y animaciones CSS inspiradoras que espero muestren el potencial ilustrado en los ejemplos bastante básicos que creé anteriormente.
Logotipos en CSS puro
Logos in Pure CSS es una gran muestra de logotipos de fama mundial recreados con nada más que CSS. En su forma actual, usan animaciones y transiciones para mostrar cómo se hacen y cómo se comparan con sus contrapartes tradicionales. Sin embargo, creo que es importante tener en cuenta que simplemente crear su logotipo en HTML/CSS abre muchas posibilidades interesantes.
Ir a Logotipos en CSS Puro
CSS A/Z
CSS A/Z es una muestra de bocetos animados HTML/CSS; uno para cada letra del alfabeto. Grandes cosas y muchas ideas para mejorar elementos aparentemente insignificantes en su sitio web.
Ir a CSS A/Z
Anillo doble
Creo que Double Ring es un gran ejemplo de algo que podrías hacer con un logo para hacerlo más llamativo e interesante.
Ir a Anillo Doble
La barra de navegación es un ejemplo de cuán dinámico y hermoso puede llegar a ser algo tan estándar como la navegación cuando se le da un poco de amor por CSS avanzado.
Ir a la barra de navegación
En pedazos
In Pieces es un caso de uso magnífico (y muy complejo) de animación CSS. Es una exhibición interactiva de la evolución de 30 especies de animales. Verdaderamente impresionante y un gran indicador de cuán poderosa puede ser una herramienta CSS.
Ir a En pedazos
Recursos adicionales y tutoriales
En su búsqueda para dominar las transiciones y animaciones CSS, es muy probable que necesite o desee más detalles de los que puedo proporcionar en esta publicación. Además, el estilo de escritura de otra persona puede ser más adecuado para tu forma de pensar. Es por eso que he compilado una breve lista de otros recursos y tutoriales útiles a continuación para que los aproveche.
- Transiciones de W3Schools
- Animaciones W3Schools
- Aprende a codificar HTML y CSS avanzados de Shay Howe
- Formas CSS 101
- Animación CSS para principiantes
- Compilación simple de transiciones, transformaciones y animaciones CSS3
- Hover.css: una colección de efectos de desplazamiento impulsados por CSS3
- Animar.css
- Botones
- Sugerencia.css
- Color.css
- 30 geniales animaciones CSS que tienes que ver
En conclusión
Las transiciones y animaciones CSS son un conjunto de capacidades extremadamente útil y versátil. Puedes hacer cosas pequeñas y sutiles o cosas grandes e impresionantes en tu cara. Pero de cualquier manera, todo comienza con dominar los conceptos básicos y avanzar desde allí.
Espero que esta publicación sea un cambio de ritmo bienvenido para aquellos que han estado solicitando más contenido relacionado con CSS. Si tiene más pensamientos o solicitudes sobre esta publicación o publicaciones futuras, no dude en enviarnos una línea en la sección de comentarios a continuación.
Miniatura del artículo a través de TCmakephoto // shutterstock.com