Section CSS Animated Gradient Background

Support
#1

I’m trying to put a custom CSS background on a section and can’t figure out the CSS id for sections.

background: linear-gradient(133deg, #5a2466, #4fa0ce);
background-size: 400% 400%;

-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;

@-webkit-keyframes AnimationName {
0%{background-position:0% 0%}
50%{background-position:93% 100%}
100%{background-position:0% 0%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 0%}
50%{background-position:93% 100%}
100%{background-position:0% 0%}
}
@keyframes AnimationName {
0%{background-position:0% 0%}
50%{background-position:93% 100%}
100%{background-position:0% 0%}
}

#2

Hi there,

Simple and Advanced mode for v2 elements were introduced in the recent update for X 6.1.0 and Cornerstone 3.1.0.

This means that you could toggle the options available for elements to have less or the complete options.

By default, simple mode is active, thus, you will be seeing fewer options like this:

So under the customize group, you can set some settings like the ID field for the section.

To have the complete options, you will have to click on the cog icon found on the left pane then enable the Advanced Mode under preferences.

Once Advanced Mode is enabled, you will have to click on the customize option under the element’s setting to be able to set some of the options like the ID, class, etc.

Hope this helps.

#3

Thanks! That helped me get the background to show up as a static gradient, but it doesn’t seem to be pulling the animation.

"#gradient1 {
background: linear-gradient(145deg, #25e6b5, #25a0e6, #b225e6);
background-size: 600% 600%;

-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
-o-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;

@-webkit-keyframes AnimationName {
0%{background-position:4% 0%}
50%{background-position:97% 100%}
100%{background-position:4% 0%}
}
@-moz-keyframes AnimationName {
0%{background-position:4% 0%}
50%{background-position:97% 100%}
100%{background-position:4% 0%}
}
@-o-keyframes AnimationName {
0%{background-position:4% 0%}
50%{background-position:97% 100%}
100%{background-position:4% 0%}
}
@keyframes AnimationName {
0%{background-position:4% 0%}
50%{background-position:97% 100%}
100%{background-position:4% 0%}
}}"

#4

Hi there,

There seems to be some CSS syntax error in your code that is why the keyframes are not working.

Please make sure you have properly blocked the CSS codes like this:

#gradient1 {
    background: linear-gradient(145deg, #25e6b5, #25a0e6, #b225e6);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    -o-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:4% 0%}
    50%{background-position:97% 100%}
    100%{background-position:4% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:4% 0%}
    50%{background-position:97% 100%}
    100%{background-position:4% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:4% 0%}
    50%{background-position:97% 100%}
    100%{background-position:4% 0%}
}
@keyframes AnimationName { 
    0%{background-position:4% 0%}
    50%{background-position:97% 100%}
    100%{background-position:4% 0%}
}

Hope this helps.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.