# Oracle APEX - Custom Highlight Animation

In some cases, highlighting events in a user interface can be very useful. It’s a powerful way to inform users about what has happened after certain actions.

For instance, imagine users are required to select a shop from a multi-column Popup LOV that displays the shop addresses for easier identification. If users select a shop by name, they might not immediately confirm that their selection is correct.

In such cases, you might use additional outputs in the Popup LOV to populate read-only items, allowing users to validate their choice.

However, simply updating the item values may not be as clear or effective for the user. This is why a small trick to highlight changes in the user interface can be very helpful just with a bit of custom CSS and JavaScript.

Here are the steps:

1. Include the following CSS classes in your custom CSS code in Theme Roller:
    

```css
@keyframes highlight {    
    50% {background-color: var(--u-color-22);}
    100% { background-color: var(--a-field-input-background-color); }
}
.active {
    background-color: var(--a-field-input-background-color);
    animation-name: highlight;
    animation-duration: 1.5s;
}
```

2. Add a custom CSS class (e.g., 'ihighlight') to all the items you want to highlight. You can do this in the item properties under Advance > CSS classes
    
3. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1722433598256/54b1182e-f91b-4f41-8326-cdcb2de794b4.png align="center")
    
    Create an `On Change` Dynamic Action in the item that will trigger the highlight
    
4. Add this small JavaScript snippet to the `True` action
    

```javascript
$('.ihighlight').removeClass('active').trigger('focus').select();
setTimeout(function () { $('.ihighlight').addClass('active');}, 100);
```

The result should be something like this:

![Oracle APEX - Animated Gif that highlight items in yellow](https://cdn.hashnode.com/res/hashnode/image/upload/v1722433715505/7e473b02-adb1-489c-b662-27c687c32121.gif align="center")

Enjoy Life!