Skip to main content
se añadieron 371 caracteres en el cuerpo
Origen Enlace
Marcos
  • 35.6k
  • 7
  • 36
  • 70

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:

  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>

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:

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>

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>

Origen Enlace
Marcos
  • 35.6k
  • 7
  • 36
  • 70

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:

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>