Una guía introductoria 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

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:

Propiedad Descripción
transition-property la propiedad CSS que debería hacer la transición
transition-duration la duración de la transición
transition-timing-function la función de tiempo utilizada por la animación (valores comunes: lineal, facilidad). Predeterminado: facilidad
transition-delay número opcional de segundos para esperar antes de comenzar la animación

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:

Valor
lineal
facilidad
facilidad en
Facilitarse
facilidad de entrada y salida

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:

Debug CSS Transitions in Chrome DevTools

Este es Firefox:

Debug CSS Transitions in Firefox DevTools

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:

Propiedad
antecedentes
color de fondo
posición de fondo
tamaño de fondo
frontera
color del borde
ancho del borde
borde inferior
color del borde inferior
radio de borde inferior izquierdo
border-bottom-right-radius
border-bottom-width
borde izquierdo
color de borde izquierdo
border-left-width
radio de borde
borde derecho
border-right-color
borde-ancho-derecho
espaciado de bordes
borde superior
borde-color-superior
border-top-left-radius
border-top-right-radius
border-top-width
fondo
sombra de la caja
color de intercalación
acortar
color
recuento de columnas
espacio entre columnas
regla de columna
color-regla-columna
ancho de regla de columna
ancho de columna
columnas
contenido
filtrar
flexionar
base flexible
crecimiento flexible
flexión-encogimiento
fuente
tamaño de fuente
ajuste de tamaño de fuente
font-stretch
peso de la fuente
área de cuadrícula
auto-columnas de cuadrícula
rejilla-auto-flujo
rejilla-filas-automáticas
fin de columna de cuadrícula
rejilla-columna-hueco
inicio de columna de cuadrícula
columna de cuadrícula
brecha en la red
fin de fila de cuadrícula
rejilla-fila-brecha
inicio de fila de cuadrícula
fila de cuadrícula
áreas de plantilla de cuadrícula
columnas-plantilla-cuadrícula
rejilla-plantilla-filas
plantilla de cuadrícula
cuadrícula
altura
izquierda
espaciado de letras
altura de la línea
margen
margen inferior
margen izquierdo
margen derecho
margen superior
Altura máxima
anchura máxima
altura mínima
ancho mínimo
opacidad
orden
contorno
color de contorno
desplazamiento de contorno
ancho de contorno
relleno
fondo acolchado
padding-left
padding-right
acolchado superior
perspectiva
perspectiva-origen
citas
derecho
tamaño de pestaña
decoración de texto
color-decoracion-texto
guion de texto
sombra de texto
cima
transformar.
alineación vertical
visibilidad
ancho
espaciado entre palabras
índice z

Descarga mi gratisManual de CSS


Más tutoriales de CSS: