Animation rotate background colour

[FoundationDesign]

Hi, I’m wondering if it is possible to rotate various colours on a background?

I’ve found this tutorial online https://youtu.be/0n_CQWLNJJw using this code…

auto background change body{ animation: change 10s infinite; } @keyframes change{ 0%{background-color: #labc9c;} 25%{background-color: #2ecc71;} 50%{background-color: #3498db;} 75%{background-color: #9b59b6;} 100%{background-color: #e74c3c;} }

I’m wanting to apply it to the black background (.e81-7.x-col) on this page https://nzcrayons.co.nz/ but I can’t get it to work.

Any help or suggestions would be greatly appreciated.

Login details in private note.

[tristup]

Hi Paul,

Thanks for reaching out.
You need to replace the body with $el.x-col and add the following custom CSS code into the Element CSS of that specific column.

 $el.x-col{ animation: change 10s infinite; } 
 @keyframes change{ 
        0%{
            background-color: #labc9c;
        } 
        25%{
            background-color: #2ecc71;
        } 
        50%{
            background-color: #3498db;
        } 
        75%{
            background-color: #9b59b6;
        } 
        100%{
            background-color: #e74c3c;
        } 
    }

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[FoundationDesign]

Ahhhh… " into the Element CSS of that specific column". That was what I was missing. Great solution @tristup… works perfectly. Thank you.

[prakash_s]

Hello Paul,

Glad that @tristup were able to help you. Please feel free to reach us if you have any concern regarding our theme and theme settings.

Thanks