Table background glowing effect

Hi,
I have a table which I´m currently styling with this CSS code:
table.tribe-events-tickets {
border-bottom: 1px solid #e3e3e3;
border-left: 1px solid #e3e3e3;
border-right: 1px solid #e3e3e3;
background-color: #FDF4F1;
}

I´d like to add a subtle color change effect to its background. That is, a color degrade animation that last 2 + 2 sec which should start with color #FaFaFa, change to color #FDF4F1, and change back to color #FaFaFa.
How can I achieve this?
The table is here: https://grumav.com/evento/curso-presencial-teorico-practico-de-acceso-venoso-en-el-paciente-neonato-y-pediatrico/

Regards,
Pablo

  • Adam Czajczyk
    • Support Gorilla

    Hi Pablo

    I hope you're well today and thank you for your question!

    This is possible with a bit of additional CSS. First, you'd need to adjust your current code a bit like this:

    table.tribe-events-tickets {
    border-bottom: 1px solid #e3e3e3;
    border-left: 1px solid #e3e3e3;
    border-right: 1px solid #e3e3e3;
    background-color: #FDF4F1;
    animation: TribeEventBackground 4s ease infinite;
    -moz-animation: TribeEventBackground 4s ease infinite;
    -webkit-animation: TribeEventBackground 4s ease infinite;
    }

    Then just below it add following CSS:

    @-webkit-keyframes TribeEventBackground {
    	0% {
    		background-color: #FaFaFa
    	}
    	50% {
    		background-color:  #FDF4F1
    	}
    	100% {
    		background-color:#FaFaFa
    	}
    }
    
    @-moz-keyframes TribeEventBackground {
    	0% {
    		background-color: #FaFaFa
    	}
    	50% {
    		background-color:  #FDF4F1
    	}
    	100% {
    		background-color:#FaFaFa
    	}
    }
    
    @keyframes TribeEventBackground {
    	0% {
    		background-color: #FaFaFa
    	}
    	50% {
    		background-color:  #FDF4F1
    	}
    	100% {
    		background-color:#FaFaFa
    	}
    }

    Once you save that (and clear site/browser cache if necessary) the background color should be "animated", changing slightly between #FaFaFa and #FDF4F1;

    I hope that helps!

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.