Animated Gradient Cover Background
To use animated background gradients to cover blocks we use this CSS, and apply the class .has-animated-bg
In this application, it is expecting a background image, if no image is required a spacer.gif file could be used and opacity on the background gradient can be set to 100.
.has-animated-bg .wp-block-cover__gradient-background {
@include breakpoint(large) {
background-size: 400% !important;
animation: bganimation 12s ease infinite;
}
}
@keyframes bganimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}Title
Title
Title