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
}
}
Solución:
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:
- Borrar dicha implementación del archivo CSS
- 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>