Transiciones y animaciones CSS

1. Transición

1) Uso básico de las transiciones

La transición es una propiedad utilizada en CSS para lograr efectos de transición suaves de elementos. Puede agregar un efecto de transición a ciertos atributos del elemento cuando cambia el estilo, para que el elemento pase gradualmente de un estilo a otro.

paso:

1. Seleccione el elemento para agregar el efecto de transición: seleccione el elemento al que desea aplicar el efecto de transición mediante el selector CSS.

.my-element {
    
    
  /* 这里是元素的初始样式 */
}

2. Definir propiedades de transición: use la propiedad de transición para definir las propiedades que se van a cambiar y el tiempo de transición. Un atributo de transición puede ser una combinación de uno o más atributos separados por comas.

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

• Propiedad: especifique el nombre de la propiedad CSS que se va a cambiar, como ancho, alto, color de fondo, etc.
• Tiempo de transición (duración): especifica la duración del efecto de transición y la unidad puede ser segundos (s) o milisegundos (ms).
• Función de temporización (función de temporización): especifica la curva de velocidad del efecto de transición. Puede usar valores predefinidos como lineal, entrada y salida lentas, etc., o puede usar la función cubic-bezier() para personalizar la curva de velocidad.
• Delay (retraso): parámetro opcional, especifique el tiempo de retraso del efecto de transición, la unidad puede ser segundos (s) o milisegundos (ms).

3. Desencadenar efectos de transición: Desencadene efectos de transición cambiando el estilo del elemento, que puede ser pasar el mouse por encima, hacer clic en eventos, etc.

/* 当鼠标悬停在.my-element元素上时，元素会平滑过渡到新的样式  */
.my-element:hover {
    
    
  /* 结束样式 */
}

Nota: Las transiciones solo se activan cuando cambian los estilos, así que asegúrese de tener un estilo inicial y un estilo final antes de activar la transición .

Ejemplo:

.my-element {
    
    
  background-color: red; /* 初始背景颜色为红色*/
}
.my-element {
    
    
  transition: background-color 1s ease-in-out 0.5s;
}
.my-element:hover {
    
    
  background-color: green; /* 结束背景颜色为绿色 */
}

2) Efecto de relajación de la transición

Los efectos de facilitación de las transiciones se pueden
lograr mediante el uso de diferentes "funciones de temporización". La función de tiempo determina la velocidad de cambio y la forma de la curva del efecto de transición en el eje de tiempo, lo que puede agregar efectos dinámicos más ricos a la transición.

Funciones de tiempo de uso común:

1. lineal: Transición lineal, es decir, un efecto de transición uniforme, el efecto de transición permanece constante desde el principio hasta el final de la duración.

.my-element {
    
    
  transition-timing-function: linear;
}

2. Facilidad: la función de tiempo predeterminada, transición uniforme, adecuada para la mayoría de las situaciones. Las transiciones son más rápidas al principio y al final, y más lentas en el medio.

.my-element {
    
    
  transition-timing-function: ease;
}

3. Facilidad de entrada: Comienza lentamente, luego acelera la transición.

.my-element {
    
    
  transition-timing-function: ease-in;
}

4. Facilidad de salida: Comience rápido, luego reduzca la velocidad de la transición.

.my-element {
    
    
  transition-timing-function: ease-out;
}

5. Facilidad de entrada y salida: lento al principio y al final, más rápido en el medio.

.my-element {
    
    
  transition-timing-function: ease-in-out;
}

Además de las funciones de tiempo predefinidas, también puede usar la función cubic-bezier() para definir una función de tiempo personalizada y determinar la forma de la curva especificando las coordenadas de los puntos de control.

.my-element {
    
    
  transition-timing-function: cubic-bezier(x1, y1, x2, y2);
  /* (x1, y1)和(x2, y2)分别表示曲线上的两个控制点的坐标，取值范围为0到1之间 */
}

2. Animación

La animación CSS es una técnica utilizada para agregar efectos dinámicos a los elementos de la página web. Puede definir los cambios de estilo de los elementos durante la animación a través de las propiedades CSS y los fotogramas clave, para lograr varios efectos de animación.

paso:

1. Definir fotogramas clave: use la regla @keyframes para definir fotogramas clave para animaciones. Los fotogramas clave se refieren a las definiciones de estilo de los elementos en diferentes puntos del proceso de animación. Los fotogramas clave se pueden definir especificando porcentajes o palabras clave como desde y hasta.

@keyframes myAnimation {
    
    
  0% {
    
    
    /* 初始样式 */
  }

  50% {
    
    
    /* 中间样式 */
  }

  100% {
    
    
    /* 结束样式 */
  }
}

2. Aplicar animación: seleccione el elemento para aplicar la animación y use el atributo de animación para especificar el nombre, la duración, la función de tiempo y otras propiedades de la animación.

.my-element {
    
    
  animation-name: myAnimation;				 /* 动画名称:myAnimation */ 
  animation-duration: 2s;					 /* 持续时间:2s */ 
  animation-timing-function: ease-in-out;	/* 时间函数 */ 
  animation-delay: 1s;						/* 延迟时间:1s */ 
  animation-iteration-count: infinite;		/* 循环次数:无限循环 */ 
  animation-direction: alternate;			/* 播放方向:交替播放 */
}

3. Opcional: use otras propiedades de animación para una configuración adicional, como animation-fill-mode (modo de relleno), animation-play-state (estado de reproducción), etc.

.my-element {
    
    
  animation-fill-mode: forwards; /* 填充模式为保持结束样式（forwards） */
  animation-play-state: paused; /* 播放状态为暂停（paused）  */
}

Combinar todas las propiedades de animación juntas (no se puede cambiar el orden):

.my-element {
    
    
  animation: myAnimation 2s ease-in-out 1s infinite alternate forwards;
}

Ejemplos de efectos de animación comunes:

1. Efecto de aparición y desaparición gradual:

.fade-in-out {
    
    
  animation: fadeInOut 2s ease-in-out infinite alternate;
}

@keyframes fadeInOut {
    
    
  0% {
    
     opacity: 0; }
  100% {
    
     opacity: 1; }
}
/* 创建了一个`fade-in-out`类，使元素在2秒内以渐变的方式从透明度0到1再到0，无限循环地交替执行。 */

2. Efecto Pan:

.slide-in {
    
    
  animation: slideIn 1s ease-out;
}

@keyframes slideIn {
    
    
  0% {
    
     transform: translateX(-100%); }
  100% {
    
     transform: translateX(0); }
}
/* 创建了一个`slide-in`类，使元素在1秒内沿着x轴从左侧滑动进入页面 */

3. Efecto de rotación:

.rotate {
    
    
  animation: rotate 2s infinite linear;
}

@keyframes rotate {
    
    
  0% {
    
     transform: rotate(0deg); }
  100% {
    
     transform: rotate(360deg); }
}
/* 创建了一个`rotate`类，使元素围绕自身中心点以线性方式无限旋转，每次旋转360度，执行时间为2秒 */

4. Efecto zoom:

.scale {
    
    
  animation: scale 1s ease-in-out infinite alternate;
}

@keyframes scale {
    
    
  0% {
    
     transform: scale(1); }
  100% {
    
     transform: scale(1.2); }
}
/* 创建了一个`scale`类，使元素在1秒内以渐变的方式从原始大小缩放到1.2倍大小，然后再返回，无限循环地交替执行 */

3. La diferencia entre transición y animación.

1. Método de activación: las transiciones generalmente se usan junto con pseudoclases de estado (como :hover, :focus, etc.), y el efecto de transición se activará cuando cambie el estado del elemento. Por ejemplo, se puede aplicar una transición a una transición suave que cambia una de sus propiedades cuando se pasa el mouse sobre ella. Las animaciones se pueden activar manualmente agregando nombres de clase CSS o usando JavaScript.

2. Método de definición: la transición logra el efecto al especificar la transición suave entre el estado inicial del elemento y el estado objetivo, y controla el efecto de transición al establecer las propiedades de transición, la duración, la función de tiempo y el retraso. La animación utiliza fotogramas clave (keyframes) para definir los cambios de estilo de los elementos durante la animación, y se pueden establecer estilos específicos para cada fotograma clave.

3. Modo de control: las transiciones solo pueden cambiar entre dos estados y se ejecutan solo una vez. Su función principal es proporcionar efectos de transición suaves. Las animaciones pueden sufrir cambios de estilo complejos, definir varios fotogramas clave, cambiar varias propiedades y repetir o reproducir al revés.

4. Escenarios de aplicación: las transiciones suelen ser adecuadas para efectos interactivos simples, como transiciones suaves de color, tamaño o posición. Las animaciones son adecuadas para efectos más complejos, como cambios continuos de estilo, como traducción, rotación y escalado.