Spin Icon Modifier

Creating dynamic user interfaces often involves more than just static visuals. In Oracle Application Express (APEX), icons can be more than just eye-catching elements; they can be animated to draw attention and enhance user interaction. Particularly, spinning an icon's modifier, rather than the entire icon, can add a subtle yet effective twist to your UI.

Here's a step-by-step guide on how to achieve this:

Step 1: Add a Custom Class to the Icon's HTML

Firstly, you need to differentiate the part of the icon you want to animate. This is done by adding a custom class to your icon's HTML markup. For instance, if you want to apply the animation to a specific modifier of the icon, you can do so by using the following snippet:

Here, cc-custom-animation is the custom class we will target with our CSS.

Step 2: Inject Life with CSS

With your custom class in place, it's time to bring the icon to life. Add the following CSS to your page:

This CSS code will apply a continuous spinning animation to the element with the class cc-custom-animation