With the site here: http://www.gradient-animator.com/

Hi,

With the site here: http://www.gradient-animator.com/

I'm trying to make custom css gradient animations when visitors visit my site via mobile. I can get the gradient background to appear in sections of each area, but I can't get them to animate. Am I doing something wrong? This is the code I pasted into the region css

{ animation: CustomAnimation 7s ease infinite !important;
background: linear-gradient(270deg, rgb(106, 209, 182), rgb(232, 242, 43));
}

I'm doing this locally so I dont screw up my live site anymore.

  • Rupok

    Hi mrcanngo

    I hope you had a wonderful day.

    Well, seems like you did a wonderful job. But the code you mentioned in your ticket, is this all you have pasted?

    I believe you already know, Gecko is the rendering engine for Firefox, And Webkit is for Chrome and Safari. So according to the CSS generator page, you also have to declare animation property for different browsers specifically with the following lines:

    -webkit-animation: CustomAnimation 7s ease infinite;
    -moz-animation: CustomAnimation 7s ease infinite;
    -o-animation: CustomAnimation 7s ease infinite;

    You haven't said anything about background-size property. It's also very important. And I see you have called CustomAnimation, but haven't decleared them. You can declare them with the following lines:

    @-webkit-keyframes CustomAnimation {
        0%{background-position:78% 0%}
        50%{background-position:23% 100%}
        100%{background-position:78% 0%}
    }
    @-moz-keyframes CustomAnimation {
        0%{background-position:78% 0%}
        50%{background-position:23% 100%}
        100%{background-position:78% 0%}
    }
    @-o-keyframes CustomAnimation {
        0%{background-position:78% 0%}
        50%{background-position:23% 100%}
        100%{background-position:78% 0%}
    }
    @keyframes CustomAnimation {
        0%{background-position:78% 0%}
        50%{background-position:23% 100%}
        100%{background-position:78% 0%}
    }

    You can use them in general CSS section of Upfront. Or you can use "Simple Custom CSS" for site-wide CSS declaration.

    I believe you have done all of this, no? If yes, then maybe I'm missing something. Can you please help me understand what exactly do you want us to help you with? I believe, we can help.

    Have a nice day. Cheers!
    Rupok

  • mrcanngo

    I finally got it working. For those that wanted to know, when I added this code:

    @-webkit-keyframes CustomAnimation {
        0%{background-position:78% 0%}
        50%{background-position:23% 100%}
        100%{background-position:78% 0%}
    }
    @-moz-keyframes CustomAnimation {
        0%{background-position:78% 0%}
        50%{background-position:23% 100%}
        100%{background-position:78% 0%}
    }
    @-o-keyframes CustomAnimation {
        0%{background-position:78% 0%}
        50%{background-position:23% 100%}
        100%{background-position:78% 0%}
    }
    @keyframes CustomAnimation {
        0%{background-position:78% 0%}
        50%{background-position:23% 100%}
        100%{background-position:78% 0%}
    }

    into the region css, it would always delete itself. I ended up just adding that part into the global custom css (in theme panel),

    and left the first part of the code in the region css (so it only applied to certain sections).

    Thanks for everyone's help.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.