Modificador de Ícono Giratorio

Crear interfaces de usuario dinámicas a menudo implica más que solo elementos visuales estáticos. En Oracle Application Express (APEX), los íconos pueden ser más que simples elementos llamativos; pueden animarse para atraer la atención y mejorar la interacción del usuario. En particular, hacer girar un modificador de un ícono en lugar de todo el ícono puede agregar un giro sutil pero efectivo a tu interfaz.

Paso a paso para lograrlo:

Paso 1: Agregar una clase personalizada al HTML del ícono

Primero, necesitas diferenciar la parte del ícono que deseas animar. Esto se logra agregando una clase personalizada en el marcado HTML del ícono. Por ejemplo, si deseas aplicar la animación a un modificador específico del ícono, puedes hacerlo con el siguiente fragmento de código:

<span aria-hidden="true"
      class="fa fa-404 fam-star fam-is-success cc-custom-animation">
</span>

Aquí, cc-custom-animation es la clase personalizada que vamos a utilizar en nuestro CSS.

Paso 2: Darle vida con CSS

Con la clase personalizada en su lugar, es momento de darle vida al ícono. Agrega el siguiente código CSS a tu página:

.cc-custom-animation:after {
    animation: fa-anim-spin 2s infinite linear;
}

Este código CSS aplicará una animación de giro continuo al elemento con la clase cc-custom-animation.