1

Estoy en angular 12 y al querer usar la clase fa-spin de Font Awesome en Font Awesome 6 la animación no aparece, el icono si.

La etiqueta que intento usar es la siguiente:

  <div class="row text-center">
    <div class="col fa-3x">
      <i class="fa-solid fa-spinner fa-spin"></i>
    </div>
  </div>

Se supone que con el fa-spin debería iniciar una animación de giro pero no sucede.

  • Bajé el archivo y lo metí en los assets para trabajarlo en local. Desde el angular.json llamo el all.css y all.js
2
  • 1
    Incluye todos los elementos que consideres necesario para que cualquiera pueda reproducir tu escenario, de otro modo, estaríamos jugando al detective con un interrogatorio extenso. Saludos. :D
    – fredyfx
    Commented el 22 mar. 2022 a las 23:00
  • Simplemente te falta crear el @keyframe fa-spin {} en tu CSS y ya está Commented el 22 mar. 2022 a las 23:03

1 respuesta 1

2

FontAwesome implementa el media query prefers-reduced-motion

La función multimedia CSS de prefers-reduced-motion se utiliza para detectar si el usuario ha solicitado que el sistema minimice la cantidad de movimiento no esencial que utiliza.

El mismo esta definido así:

@media (prefers-reduced-motion:reduce) {
    .fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse {
        -webkit-animation-delay: -1ms;
        animation-delay: -1ms;
        -webkit-animation-duration: 1ms;
        animation-duration: 1ms;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
        transition-delay: 0s;
        transition-duration: 0s
    }
}

Al utilizar reduce

Indica que el usuario ha notificado al sistema que prefiere una interfaz que elimine o reemplace los tipos de animación basada en movimiento que provocan molestias para las personas con trastornos del movimiento vestibular.

Y si analizamos la regla podemos ver que la animación se realiza 1 sola vez e inicia antes de que la podamos ver.

Solución:

Existen 2 opciones:

  1. Borrar dicha implementación del archivo CSS
  2. Pisarla

Ejemplo:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<style>
@media (prefers-reduced-motion:reduce) {
  .fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse {
    -webkit-animation-delay: var(--fa-animation-delay, 0);
    animation-delay: var(--fa-animation-delay, 0);
    -webkit-animation-duration: var(--fa-animation-duration, 2s);
    animation-duration: var(--fa-animation-duration, 2s);
    -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  }
}
</style>

<div class="row text-center">
  <div class="col fa-3x">
    <i class="fa-solid fa-spinner fa-spin"></i>
  </div>
</div>

2
  • Muchas gracias, me decidí por la segunda forma y funciono. Aun así no logré entender muy bien el problema que tiene esa @media. Sé que se quitan 2 propiedades pero no entiendo el conflicto real.
    – Carlos
    Commented el 23 mar. 2022 a las 2:11
  • @CarlosEscobar, actualice mi respuesta. Espero que ahora se entienda mejor porque no se ve la animación.
    – Marcos
    Commented el 23 mar. 2022 a las 10:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.