Using keyframes animation on an ion-item - Background Color

Ionic Framework
1

I’m trying to create a ‘flashing’ animation for a new ion-item that has been added to a page. I am using keyframes with ‘from’ and ‘to’ such as below:

.chat-message{
        @keyframes newmessage {
            from {                
                background: var(--ion-item-background-new);
            }
            to {
                background: var(--ion-item-background);                
            }
        }        
        animation: newmessage 3s ease-out 1;      
    }

This is not doing anything. If I use a different css property, such as opacity, this works fine, but never works when using background. I’ve tried using every background color variable I can think of to accomplish this. Is this a limitation of ion-item and the shadow DOM?

2

As you can see here, the background on the Item is set via –background.

3

I’ve tried that variable/property as well, but it does nothing.

4

Ahh i think it won’t work to just transform a variable :thinking: