Una guía introductoria a las transiciones CSS

• Introducción a las transiciones CSS
• Ejemplo de una transición CSS
• Valores de la función de temporización de transición
• Transiciones CSS en las herramientas de desarrollo del navegador
• Qué propiedades puede animar usando transiciones CSS

Introducción a las transiciones CSS

Las transiciones CSS son la forma más sencilla de crear una animación en CSS.

En una transición, cambia el valor de una propiedad y le dice a CSS que lo cambie lentamente de acuerdo con algunos parámetros, hacia un estado final.

Las transiciones CSS se definen mediante estas propiedades:

lostransitionproperty es una práctica abreviatura:

.container {
  transition: property duration timing-function delay;
}

Ejemplo de una transición CSS

Este código implementa una transición CSS:

.one,
.three {
  background: rgba(142, 92, 205, 0.75);
  transition: background 1s ease-in;
}
.two,
.four {
background: rgba(236, 252, 100, 0.75);
}
.circle:hover {
background: rgba(142, 92, 205, 0.25); /* lighter */
}

Vea el ejemplo en Glitchhttps://glitch.com/edit/#!/flavio-css-transitions-example

Al pasar el.oney.threeelementos, los círculos morados, hay una animación de transición que facilita el cambio de fondo, mientras que los círculos amarillos no, porque no tienen eltransitionpropiedad definida.

Valores de la función de temporización de transición

transition-timing-functionpermite especificar la curva de aceleración de la transición.

Hay algunos valores simples que puede usar:

Esta fallamuestra cómo funcionan en la práctica.

Puede crear una función de temporización completamente personalizada utilizandocurvas de Bézier cúbicas. Esto es bastante avanzado, pero básicamente cualquiera de las funciones anteriores se construye usando curvas Bézier. Tenemos nombres útiles ya que son comunes.

Transiciones CSS en las herramientas de desarrollo del navegador

losHerramientas de desarrollo del navegadorofrecen una excelente manera de visualizar las transiciones.

Esto es Chrome:

Este es Firefox:

Desde esos paneles, puede editar en vivo la transición y experimentar en la página directamente sin volver a cargar su código.

Qué propiedades puede animar usando transiciones CSS

¡Un monton! Pero no todas las propiedades CSS.

Aquí está la lista completa:

Más tutoriales de CSS:

• La guía de Flexbox
• Tutorial de cuadrícula CSS
• Variables CSS (propiedades personalizadas)
• Introducción a PostCSS
• La propiedad de margen CSS
• Cómo centrar un elemento con CSS
• Fuentes del sistema CSS
• Cómo imprimir tu HTML con estilo
• Una guía introductoria a las transiciones CSS
• Un tutorial de animaciones CSS
• Introducción a CSS
• La guía CSS
• Cómo configurar Tailwind con PurgeCSS y PostCSS
• La hoja de trucos de Tailwind
• Cómo rotar continuamente una imagen usando CSS
• Hacer que una tabla responda usando CSS
• Cómo depurar CSS biseccionando
• Selectores CSS
• Cascada CSS
• Especificidad CSS
• Selectores de atributos CSS
• Colores CSS
• Unidades CSS
• URL de CSS ()
• Tipografía CSS
• El modelo de caja CSS
• La propiedad de posición CSS
• Consultas de medios CSS y diseño receptivo
• Consultas de funciones CSS
• Transformaciones CSS
• Cómo diseñar listas usando CSS
• Prefijos de proveedores de CSS
• Herencia CSS
• Pseudoclases CSS
• Pseudoelementos CSS
• Diseñar tablas HTML con CSS
• La propiedad de visualización de CSS
• La función CSS calc ()
• Bordes CSS
• Importando un archivo CSS usando @import
• Manejo de errores CSS
• Filtros CSS
• Tamaño de caja CSS
• Fondos CSS
• Comentarios CSS
• Fuentes CSS
• Relleno CSS
• La propiedad flotante de CSS y su compensación
• Normalización de CSS
• La propiedad de índice z de CSS
• Cómo deshabilitar la selección de texto usando CSS
• Cómo poner un elemento en la parte inferior de su contenedor usando CSS
• Cómo invertir colores usando CSS
• Etiquetas previas receptivas en CSS
• Incrustaciones de video de YouTube receptivas
• ¿Cuáles son los buenos valores de CSS Breakpoint para Responsive Design?
• Cómo alinear el centro en flexbox