Add a bit of extra movement into your Divi website like on the homepage of Divi Theme Examples with CSS gradient animations. The technique was created using the gradient animator site with a few edits of the code to make it work how I needed.

1 – First you will need to  add the CSS class animate-area to the section you want the background to appear on.

2 – Then add the following cod into your Divi Theme options custom CSS panel (it was not working for me in my child theme CSS file but you can try) You can edit the colours by editing background: linear-gradient(180deg, #253b46, #0f5f68, #3a134a); If you add more than 3 colours you will also need to adjust the background-size: 600% 600%; where each colour is represented by an extra 200%

/*———————————–
styles for animated background test
————————————-*/

@-webkit-keyframes animatedBack {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}
@-moz-keyframes animatedBack {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}
@keyframes animatedBack {
0%{background-position:50% 0%}
50%{background-position:50% 100%}
100%{background-position:50% 0%}
}
.animate-area {
background: linear-gradient(180deg, #253b46, #0f5f68, #3a134a);
background-size: 600% 600%;
-webkit-animation: animatedBack 5s ease infinite;
-moz-animation: animatedBack 5s ease infinite;
animation: animatedBack 5s ease infinite;
}

Comments

comments

Pin It on Pinterest

Divi Freebies

Do you want some Divi FREEBIES?

Join our mailing list to receive the latest news, reviews, examples and Divi Theme FREEBIES.

You have Successfully Subscribed!