css gradient animation coming as a static slide show The Next CEO of Stack OverflowHow to animate gradient background smoothlyStyle HTML select and option tagsCreating a two-column-100% layout with BootstrapAdd a hatch pattern over a linear-gradient in a divanimate radial-gradient CSS3 : move from left to right?Easy Div and Linear Gradient CSSanimated gradient (javascript) background will not extend to full height of windowanimate css gradient arrayCSS Repeatable slider animationUnwanted overlay of java script picture slide animation with website headerUsing javascript to change gradient colors in animated background

Return the Closest Prime Number

Customer Requests (Sometimes) Drive Me Bonkers!

Fastest way to shutdown Ubuntu Mate 18.10

How to Reset Passwords on Multiple Websites Easily?

What does this shorthand mean?

Anatomically Correct Strange Women In Ponds Distributing Swords

WOW air has ceased operation, can I get my tickets refunded?

How can I open an app using Terminal?

Why is there a PLL in CPU?

Increase performance creating Mandelbrot set in python

How to get regions to plot as graphics

Can a caster that cast Polymorph on themselves stop concentrating at any point even if their Int is low?

Would this house-rule that treats advantage as a +1 to the roll instead (and disadvantage as -1) and allows them to stack be balanced?

How do I go from 300 unfinished/half written blog posts, to published posts?

How do I solve this limit?

What can we do to stop prior company from asking us questions?

The King's new dress

Describing a person. What needs to be mentioned?

Why here is plural "We went to the movies last night."

Which organization defines CJK Unified Ideographs?

How to make a software documentation "officially" citable?

How long to clear the 'suck zone' of a turbofan after start is initiated?

How do scammers retract money, while you can’t?

Why do remote companies require working in the US?



css gradient animation coming as a static slide show



The Next CEO of Stack OverflowHow to animate gradient background smoothlyStyle HTML select and option tagsCreating a two-column-100% layout with BootstrapAdd a hatch pattern over a linear-gradient in a divanimate radial-gradient CSS3 : move from left to right?Easy Div and Linear Gradient CSSanimated gradient (javascript) background will not extend to full height of windowanimate css gradient arrayCSS Repeatable slider animationUnwanted overlay of java script picture slide animation with website headerUsing javascript to change gradient colors in animated background










0


















.homepage
 width:200px;
 height:200px;
 animation: wave 5s linear infinite forwards;


@keyframes wave{
 0% 
 background: linear-gradient(to bottom right, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51),#000);
 
 25%
 background: linear-gradient(to bottom right,#000, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51));
 
 50%
 background: linear-gradient(to bottom right,rgb(51, 51, 51) ,#000, rgb(0, 0, 0), rgb(25, 24, 27));
 
 75%
 background: linear-gradient(to bottom right, rgb(25, 24, 27),rgb(51, 51, 51) ,#000, rgb(0, 0, 0));
 
 100%
 background: linear-gradient(to bottom right, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51),#000);
 

<div class="homepage">
</div>





I tried to set background color (linear gradient) animation as some type of waves, but I am getting it as a slide show.



it will be helpful to me if I can get it as a wave pattern






html css animation







share|improve this question



















  • 2





    Gradients cannot be animated.

    – Paulie_D
    Mar 8 at 13:13






  • 1





    You could try making the background much larger and animating the background-position instead? Here's a good generator https://www.gradient-animator.com/, you can play around with it to see if you can get the effect you're looking for.

    – coops
    Mar 8 at 13:24
















0


















.homepage
 width:200px;
 height:200px;
 animation: wave 5s linear infinite forwards;


@keyframes wave{
 0% 
 background: linear-gradient(to bottom right, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51),#000);
 
 25%
 background: linear-gradient(to bottom right,#000, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51));
 
 50%
 background: linear-gradient(to bottom right,rgb(51, 51, 51) ,#000, rgb(0, 0, 0), rgb(25, 24, 27));
 
 75%
 background: linear-gradient(to bottom right, rgb(25, 24, 27),rgb(51, 51, 51) ,#000, rgb(0, 0, 0));
 
 100%
 background: linear-gradient(to bottom right, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51),#000);
 

<div class="homepage">
</div>





I tried to set background color (linear gradient) animation as some type of waves, but I am getting it as a slide show.



it will be helpful to me if I can get it as a wave pattern






html css animation







share|improve this question



















  • 2





    Gradients cannot be animated.

    – Paulie_D
    Mar 8 at 13:13






  • 1





    You could try making the background much larger and animating the background-position instead? Here's a good generator https://www.gradient-animator.com/, you can play around with it to see if you can get the effect you're looking for.

    – coops
    Mar 8 at 13:24














0












0








0











.homepage
 width:200px;
 height:200px;
 animation: wave 5s linear infinite forwards;


@keyframes wave{
 0% 
 background: linear-gradient(to bottom right, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51),#000);
 
 25%
 background: linear-gradient(to bottom right,#000, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51));
 
 50%
 background: linear-gradient(to bottom right,rgb(51, 51, 51) ,#000, rgb(0, 0, 0), rgb(25, 24, 27));
 
 75%
 background: linear-gradient(to bottom right, rgb(25, 24, 27),rgb(51, 51, 51) ,#000, rgb(0, 0, 0));
 
 100%
 background: linear-gradient(to bottom right, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51),#000);
 

<div class="homepage">
</div>





I tried to set background color (linear gradient) animation as some type of waves, but I am getting it as a slide show.



it will be helpful to me if I can get it as a wave pattern






html css animation







share|improve this question



















.homepage
 width:200px;
 height:200px;
 animation: wave 5s linear infinite forwards;


@keyframes wave{
 0% 
 background: linear-gradient(to bottom right, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51),#000);
 
 25%
 background: linear-gradient(to bottom right,#000, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51));
 
 50%
 background: linear-gradient(to bottom right,rgb(51, 51, 51) ,#000, rgb(0, 0, 0), rgb(25, 24, 27));
 
 75%
 background: linear-gradient(to bottom right, rgb(25, 24, 27),rgb(51, 51, 51) ,#000, rgb(0, 0, 0));
 
 100%
 background: linear-gradient(to bottom right, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51),#000);
 

<div class="homepage">
</div>





I tried to set background color (linear gradient) animation as some type of waves, but I am getting it as a slide show.



it will be helpful to me if I can get it as a wave pattern






.homepage
 width:200px;
 height:200px;
 animation: wave 5s linear infinite forwards;


@keyframes wave{
 0% 
 background: linear-gradient(to bottom right, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51),#000);
 
 25%
 background: linear-gradient(to bottom right,#000, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51));
 
 50%
 background: linear-gradient(to bottom right,rgb(51, 51, 51) ,#000, rgb(0, 0, 0), rgb(25, 24, 27));
 
 75%
 background: linear-gradient(to bottom right, rgb(25, 24, 27),rgb(51, 51, 51) ,#000, rgb(0, 0, 0));
 
 100%
 background: linear-gradient(to bottom right, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51),#000);
 

<div class="homepage">
</div>





.homepage
 width:200px;
 height:200px;
 animation: wave 5s linear infinite forwards;


@keyframes wave{
 0% 
 background: linear-gradient(to bottom right, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51),#000);
 
 25%
 background: linear-gradient(to bottom right,#000, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51));
 
 50%
 background: linear-gradient(to bottom right,rgb(51, 51, 51) ,#000, rgb(0, 0, 0), rgb(25, 24, 27));
 
 75%
 background: linear-gradient(to bottom right, rgb(25, 24, 27),rgb(51, 51, 51) ,#000, rgb(0, 0, 0));
 
 100%
 background: linear-gradient(to bottom right, rgb(0, 0, 0), rgb(25, 24, 27),rgb(51, 51, 51),#000);
 

<div class="homepage">
</div>





html css animation




html css animation






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Mar 8 at 13:16









yunzen

21.7k85081




21.7k85081










asked Mar 8 at 13:08









Amit KumawatAmit Kumawat

436




436







  • 2





    Gradients cannot be animated.

    – Paulie_D
    Mar 8 at 13:13






  • 1





    You could try making the background much larger and animating the background-position instead? Here's a good generator https://www.gradient-animator.com/, you can play around with it to see if you can get the effect you're looking for.

    – coops
    Mar 8 at 13:24













  • 2





    Gradients cannot be animated.

    – Paulie_D
    Mar 8 at 13:13






  • 1





    You could try making the background much larger and animating the background-position instead? Here's a good generator https://www.gradient-animator.com/, you can play around with it to see if you can get the effect you're looking for.

    – coops
    Mar 8 at 13:24








2




2





Gradients cannot be animated.

– Paulie_D
Mar 8 at 13:13





Gradients cannot be animated.

– Paulie_D
Mar 8 at 13:13




1




1





You could try making the background much larger and animating the background-position instead? Here's a good generator https://www.gradient-animator.com/, you can play around with it to see if you can get the effect you're looking for.

– coops
Mar 8 at 13:24






You could try making the background much larger and animating the background-position instead? Here's a good generator https://www.gradient-animator.com/, you can play around with it to see if you can get the effect you're looking for.

– coops
Mar 8 at 13:24













1 Answer
1






active

oldest

votes


















1














I achieve this by making the gradient a repeating gradient, but only using 1 quarter of the full gradient (0% through 25%) That is done by the calc() code



I need thirds for the second term, because you have 3 color stops (last one is equal to first one).



Then I scale the background by 4 (opposite of 1 quarter from above).



I can then animate the background-position






.homepage 
 width:200px;
 height:200px;
 
 animation: wave 5s linear infinite forwards;
 background-image: repeating-linear-gradient(
 45deg, 
 rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
 rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
 rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
 rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
 );
 background-size: 400% 400%;


@keyframes wave 
 from 
 background-position: 100% 0;
 
 to 
 background-position: 0 100%;
 

<div class="homepage">
</div>





The direction of the animation is either left diagonal or right diagonal;






.container 
 line-height: 0px;

.homepage1,
.homepage2,
.homepage3,
.homepage4 
 width:200px;
 height:200px;
 display: inline-block;
 background-size: 400% 400%;
 animation: 5s linear infinite forwards


.homepage1 
 animation-name: wave1;
 background-image: repeating-linear-gradient(
 45deg, 
 rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
 rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
 rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
 rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
 );


.homepage2 
 animation-name: wave2;
 animation-direction: reverse;
 background-image: repeating-linear-gradient(
 -45deg, 
 rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
 rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
 rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
 rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
 );


.homepage3 
 animation-name: wave2;
 animation-direction: normal;
 background-image: repeating-linear-gradient(
 135deg, 
 rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
 rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
 rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
 rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
 );


.homepage4 
 animation-name: wave1;
 animation-direction: reverse;
 background-image: repeating-linear-gradient(
 -135deg, 
 rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
 rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
 rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
 rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
 );


@keyframes wave1 
 from 
 background-position: 100% 0;
 
 to 
 background-position: 0 100%;
 


@keyframes wave2 
 from 
 background-position: 100% 100%;
 
 to 
 background-position: 0 0;
 

<div class="container">
 <div class="homepage1"></div><div class="homepage2"></div><br>
 <div class="homepage3"></div><div class="homepage4"></div>
</div>





or






html, body 
 height: 100%;
 padding: 0;

body 
display: flex;

.container 
 display: flex;
 flex-wrap: wrap;
 flex-grow: 1;

.homepage1,
.homepage2,
.homepage3,
.homepage4 
 flex: 1 1 calc(100% / 8);
 display: inline-block;
 background-size: 400% 400%;
 animation: 5s linear infinite forwards


:root 
 --rainbow: 
 red calc(100% / 4 * 0 / 6), 
 orange calc(100% / 4 * 1 / 6),
 yellow calc(100% / 4 * 2 / 6),
 green calc(100% / 4 * 3 / 6),
 blue calc(100% / 4 * 4 / 6),
 purple calc(100% / 4 * 5 / 6),
 red calc(100% / 4 * 6 / 6);
 --bw: 
 rgba(000, 000, 000, 0.5) calc(100% / 16 * 0 / 8),
 rgba(020, 020, 020, 0.5) calc(100% / 16 * 1 / 8),
 rgba(127, 127, 127, 0.5) calc(100% / 16 * 2 / 8),
 rgba(235, 235, 235, 0.5) calc(100% / 16 * 3 / 8),
 rgba(255, 255, 255, 0.5) calc(100% / 16 * 4 / 8),
 rgba(235, 235, 235, 0.5) calc(100% / 16 * 5 / 8),
 rgba(127, 127, 127, 0.5) calc(100% / 16 * 6 / 8),
 rgba(020, 020, 020, 0.5) calc(100% / 16 * 7 / 8),
 rgba(000, 000, 000, 0.5) calc(100% / 16 * 8 / 8);


.homepage1 
 animation-name: wave2;
 background-image: 
 repeating-linear-gradient(
 45deg, 
 var(--bw)
 ),
 repeating-linear-gradient(
 -45deg, 
 var(--rainbow)
 );


.homepage2 
 animation-name: wave1;
 animation-direction: reverse;
 background-image: 
 repeating-linear-gradient(
 -45deg, 
 var(--bw)
 ),
 repeating-linear-gradient(
 45deg, 
 var(--rainbow)
 );


.homepage3 
 animation-name: wave1;
 animation-direction: normal;
 background-image: 
 repeating-linear-gradient(
 -45deg, 
 var(--bw)
 ),
 repeating-linear-gradient(
 -135deg, 
 var(--rainbow)
 );


.homepage4 
 animation-name: wave2;
 animation-direction: reverse;
 background-image: 
 repeating-linear-gradient(
 45deg, 
 var(--bw)
 ),
 repeating-linear-gradient(
 135deg, 
 var(--rainbow)
 );


@keyframes wave1 
 from 
 background-position: 100% 0;
 
 to 
 background-position: 0 100%;
 


@keyframes wave2 
 from 
 background-position: 100% 100%;
 
 to 
 background-position: 0 0;
 



body 
margin: 0;
padding: 0;
display: flex;

<div class="container">
 <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
 <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
 <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
 <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
 <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
 <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
 <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
 <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
</div>








share|improve this answer

























    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













    draft saved

    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55063883%2fcss-gradient-animation-coming-as-a-static-slide-show%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    I achieve this by making the gradient a repeating gradient, but only using 1 quarter of the full gradient (0% through 25%) That is done by the calc() code



    I need thirds for the second term, because you have 3 color stops (last one is equal to first one).



    Then I scale the background by 4 (opposite of 1 quarter from above).



    I can then animate the background-position






    .homepage 
     width:200px;
     height:200px;
     
     animation: wave 5s linear infinite forwards;
     background-image: repeating-linear-gradient(
     45deg, 
     rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
     rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
     rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
     rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
     );
     background-size: 400% 400%;


    @keyframes wave 
     from 
     background-position: 100% 0;
     
     to 
     background-position: 0 100%;
     

    <div class="homepage">
    </div>





    The direction of the animation is either left diagonal or right diagonal;






    .container 
     line-height: 0px;

    .homepage1,
    .homepage2,
    .homepage3,
    .homepage4 
     width:200px;
     height:200px;
     display: inline-block;
     background-size: 400% 400%;
     animation: 5s linear infinite forwards


    .homepage1 
     animation-name: wave1;
     background-image: repeating-linear-gradient(
     45deg, 
     rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
     rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
     rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
     rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
     );


    .homepage2 
     animation-name: wave2;
     animation-direction: reverse;
     background-image: repeating-linear-gradient(
     -45deg, 
     rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
     rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
     rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
     rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
     );


    .homepage3 
     animation-name: wave2;
     animation-direction: normal;
     background-image: repeating-linear-gradient(
     135deg, 
     rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
     rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
     rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
     rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
     );


    .homepage4 
     animation-name: wave1;
     animation-direction: reverse;
     background-image: repeating-linear-gradient(
     -135deg, 
     rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
     rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
     rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
     rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
     );


    @keyframes wave1 
     from 
     background-position: 100% 0;
     
     to 
     background-position: 0 100%;
     


    @keyframes wave2 
     from 
     background-position: 100% 100%;
     
     to 
     background-position: 0 0;
     

    <div class="container">
     <div class="homepage1"></div><div class="homepage2"></div><br>
     <div class="homepage3"></div><div class="homepage4"></div>
    </div>





    or






    html, body 
     height: 100%;
     padding: 0;

    body 
    display: flex;

    .container 
     display: flex;
     flex-wrap: wrap;
     flex-grow: 1;

    .homepage1,
    .homepage2,
    .homepage3,
    .homepage4 
     flex: 1 1 calc(100% / 8);
     display: inline-block;
     background-size: 400% 400%;
     animation: 5s linear infinite forwards


    :root 
     --rainbow: 
     red calc(100% / 4 * 0 / 6), 
     orange calc(100% / 4 * 1 / 6),
     yellow calc(100% / 4 * 2 / 6),
     green calc(100% / 4 * 3 / 6),
     blue calc(100% / 4 * 4 / 6),
     purple calc(100% / 4 * 5 / 6),
     red calc(100% / 4 * 6 / 6);
     --bw: 
     rgba(000, 000, 000, 0.5) calc(100% / 16 * 0 / 8),
     rgba(020, 020, 020, 0.5) calc(100% / 16 * 1 / 8),
     rgba(127, 127, 127, 0.5) calc(100% / 16 * 2 / 8),
     rgba(235, 235, 235, 0.5) calc(100% / 16 * 3 / 8),
     rgba(255, 255, 255, 0.5) calc(100% / 16 * 4 / 8),
     rgba(235, 235, 235, 0.5) calc(100% / 16 * 5 / 8),
     rgba(127, 127, 127, 0.5) calc(100% / 16 * 6 / 8),
     rgba(020, 020, 020, 0.5) calc(100% / 16 * 7 / 8),
     rgba(000, 000, 000, 0.5) calc(100% / 16 * 8 / 8);


    .homepage1 
     animation-name: wave2;
     background-image: 
     repeating-linear-gradient(
     45deg, 
     var(--bw)
     ),
     repeating-linear-gradient(
     -45deg, 
     var(--rainbow)
     );


    .homepage2 
     animation-name: wave1;
     animation-direction: reverse;
     background-image: 
     repeating-linear-gradient(
     -45deg, 
     var(--bw)
     ),
     repeating-linear-gradient(
     45deg, 
     var(--rainbow)
     );


    .homepage3 
     animation-name: wave1;
     animation-direction: normal;
     background-image: 
     repeating-linear-gradient(
     -45deg, 
     var(--bw)
     ),
     repeating-linear-gradient(
     -135deg, 
     var(--rainbow)
     );


    .homepage4 
     animation-name: wave2;
     animation-direction: reverse;
     background-image: 
     repeating-linear-gradient(
     45deg, 
     var(--bw)
     ),
     repeating-linear-gradient(
     135deg, 
     var(--rainbow)
     );


    @keyframes wave1 
     from 
     background-position: 100% 0;
     
     to 
     background-position: 0 100%;
     


    @keyframes wave2 
     from 
     background-position: 100% 100%;
     
     to 
     background-position: 0 0;
     



    body 
    margin: 0;
    padding: 0;
    display: flex;

    <div class="container">
     <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
     <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
     <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
     <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
     <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
     <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
     <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
     <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
    </div>








    share|improve this answer





























      1














      I achieve this by making the gradient a repeating gradient, but only using 1 quarter of the full gradient (0% through 25%) That is done by the calc() code



      I need thirds for the second term, because you have 3 color stops (last one is equal to first one).



      Then I scale the background by 4 (opposite of 1 quarter from above).



      I can then animate the background-position






      .homepage 
       width:200px;
       height:200px;
       
       animation: wave 5s linear infinite forwards;
       background-image: repeating-linear-gradient(
       45deg, 
       rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
       rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
       rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
       rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
       );
       background-size: 400% 400%;


      @keyframes wave 
       from 
       background-position: 100% 0;
       
       to 
       background-position: 0 100%;
       

      <div class="homepage">
      </div>





      The direction of the animation is either left diagonal or right diagonal;






      .container 
       line-height: 0px;

      .homepage1,
      .homepage2,
      .homepage3,
      .homepage4 
       width:200px;
       height:200px;
       display: inline-block;
       background-size: 400% 400%;
       animation: 5s linear infinite forwards


      .homepage1 
       animation-name: wave1;
       background-image: repeating-linear-gradient(
       45deg, 
       rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
       rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
       rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
       rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
       );


      .homepage2 
       animation-name: wave2;
       animation-direction: reverse;
       background-image: repeating-linear-gradient(
       -45deg, 
       rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
       rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
       rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
       rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
       );


      .homepage3 
       animation-name: wave2;
       animation-direction: normal;
       background-image: repeating-linear-gradient(
       135deg, 
       rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
       rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
       rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
       rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
       );


      .homepage4 
       animation-name: wave1;
       animation-direction: reverse;
       background-image: repeating-linear-gradient(
       -135deg, 
       rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
       rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
       rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
       rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
       );


      @keyframes wave1 
       from 
       background-position: 100% 0;
       
       to 
       background-position: 0 100%;
       


      @keyframes wave2 
       from 
       background-position: 100% 100%;
       
       to 
       background-position: 0 0;
       

      <div class="container">
       <div class="homepage1"></div><div class="homepage2"></div><br>
       <div class="homepage3"></div><div class="homepage4"></div>
      </div>





      or






      html, body 
       height: 100%;
       padding: 0;

      body 
      display: flex;

      .container 
       display: flex;
       flex-wrap: wrap;
       flex-grow: 1;

      .homepage1,
      .homepage2,
      .homepage3,
      .homepage4 
       flex: 1 1 calc(100% / 8);
       display: inline-block;
       background-size: 400% 400%;
       animation: 5s linear infinite forwards


      :root 
       --rainbow: 
       red calc(100% / 4 * 0 / 6), 
       orange calc(100% / 4 * 1 / 6),
       yellow calc(100% / 4 * 2 / 6),
       green calc(100% / 4 * 3 / 6),
       blue calc(100% / 4 * 4 / 6),
       purple calc(100% / 4 * 5 / 6),
       red calc(100% / 4 * 6 / 6);
       --bw: 
       rgba(000, 000, 000, 0.5) calc(100% / 16 * 0 / 8),
       rgba(020, 020, 020, 0.5) calc(100% / 16 * 1 / 8),
       rgba(127, 127, 127, 0.5) calc(100% / 16 * 2 / 8),
       rgba(235, 235, 235, 0.5) calc(100% / 16 * 3 / 8),
       rgba(255, 255, 255, 0.5) calc(100% / 16 * 4 / 8),
       rgba(235, 235, 235, 0.5) calc(100% / 16 * 5 / 8),
       rgba(127, 127, 127, 0.5) calc(100% / 16 * 6 / 8),
       rgba(020, 020, 020, 0.5) calc(100% / 16 * 7 / 8),
       rgba(000, 000, 000, 0.5) calc(100% / 16 * 8 / 8);


      .homepage1 
       animation-name: wave2;
       background-image: 
       repeating-linear-gradient(
       45deg, 
       var(--bw)
       ),
       repeating-linear-gradient(
       -45deg, 
       var(--rainbow)
       );


      .homepage2 
       animation-name: wave1;
       animation-direction: reverse;
       background-image: 
       repeating-linear-gradient(
       -45deg, 
       var(--bw)
       ),
       repeating-linear-gradient(
       45deg, 
       var(--rainbow)
       );


      .homepage3 
       animation-name: wave1;
       animation-direction: normal;
       background-image: 
       repeating-linear-gradient(
       -45deg, 
       var(--bw)
       ),
       repeating-linear-gradient(
       -135deg, 
       var(--rainbow)
       );


      .homepage4 
       animation-name: wave2;
       animation-direction: reverse;
       background-image: 
       repeating-linear-gradient(
       45deg, 
       var(--bw)
       ),
       repeating-linear-gradient(
       135deg, 
       var(--rainbow)
       );


      @keyframes wave1 
       from 
       background-position: 100% 0;
       
       to 
       background-position: 0 100%;
       


      @keyframes wave2 
       from 
       background-position: 100% 100%;
       
       to 
       background-position: 0 0;
       



      body 
      margin: 0;
      padding: 0;
      display: flex;

      <div class="container">
       <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
       <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
       <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
       <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
       <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
       <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
       <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
       <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
      </div>








      share|improve this answer



























        1












        1








        1







        I achieve this by making the gradient a repeating gradient, but only using 1 quarter of the full gradient (0% through 25%) That is done by the calc() code



        I need thirds for the second term, because you have 3 color stops (last one is equal to first one).



        Then I scale the background by 4 (opposite of 1 quarter from above).



        I can then animate the background-position






        .homepage 
         width:200px;
         height:200px;
         
         animation: wave 5s linear infinite forwards;
         background-image: repeating-linear-gradient(
         45deg, 
         rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
         rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
         rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
         rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
         );
         background-size: 400% 400%;


        @keyframes wave 
         from 
         background-position: 100% 0;
         
         to 
         background-position: 0 100%;
         

        <div class="homepage">
        </div>





        The direction of the animation is either left diagonal or right diagonal;






        .container 
         line-height: 0px;

        .homepage1,
        .homepage2,
        .homepage3,
        .homepage4 
         width:200px;
         height:200px;
         display: inline-block;
         background-size: 400% 400%;
         animation: 5s linear infinite forwards


        .homepage1 
         animation-name: wave1;
         background-image: repeating-linear-gradient(
         45deg, 
         rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
         rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
         rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
         rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
         );


        .homepage2 
         animation-name: wave2;
         animation-direction: reverse;
         background-image: repeating-linear-gradient(
         -45deg, 
         rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
         rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
         rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
         rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
         );


        .homepage3 
         animation-name: wave2;
         animation-direction: normal;
         background-image: repeating-linear-gradient(
         135deg, 
         rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
         rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
         rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
         rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
         );


        .homepage4 
         animation-name: wave1;
         animation-direction: reverse;
         background-image: repeating-linear-gradient(
         -135deg, 
         rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
         rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
         rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
         rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
         );


        @keyframes wave1 
         from 
         background-position: 100% 0;
         
         to 
         background-position: 0 100%;
         


        @keyframes wave2 
         from 
         background-position: 100% 100%;
         
         to 
         background-position: 0 0;
         

        <div class="container">
         <div class="homepage1"></div><div class="homepage2"></div><br>
         <div class="homepage3"></div><div class="homepage4"></div>
        </div>





        or






        html, body 
         height: 100%;
         padding: 0;

        body 
        display: flex;

        .container 
         display: flex;
         flex-wrap: wrap;
         flex-grow: 1;

        .homepage1,
        .homepage2,
        .homepage3,
        .homepage4 
         flex: 1 1 calc(100% / 8);
         display: inline-block;
         background-size: 400% 400%;
         animation: 5s linear infinite forwards


        :root 
         --rainbow: 
         red calc(100% / 4 * 0 / 6), 
         orange calc(100% / 4 * 1 / 6),
         yellow calc(100% / 4 * 2 / 6),
         green calc(100% / 4 * 3 / 6),
         blue calc(100% / 4 * 4 / 6),
         purple calc(100% / 4 * 5 / 6),
         red calc(100% / 4 * 6 / 6);
         --bw: 
         rgba(000, 000, 000, 0.5) calc(100% / 16 * 0 / 8),
         rgba(020, 020, 020, 0.5) calc(100% / 16 * 1 / 8),
         rgba(127, 127, 127, 0.5) calc(100% / 16 * 2 / 8),
         rgba(235, 235, 235, 0.5) calc(100% / 16 * 3 / 8),
         rgba(255, 255, 255, 0.5) calc(100% / 16 * 4 / 8),
         rgba(235, 235, 235, 0.5) calc(100% / 16 * 5 / 8),
         rgba(127, 127, 127, 0.5) calc(100% / 16 * 6 / 8),
         rgba(020, 020, 020, 0.5) calc(100% / 16 * 7 / 8),
         rgba(000, 000, 000, 0.5) calc(100% / 16 * 8 / 8);


        .homepage1 
         animation-name: wave2;
         background-image: 
         repeating-linear-gradient(
         45deg, 
         var(--bw)
         ),
         repeating-linear-gradient(
         -45deg, 
         var(--rainbow)
         );


        .homepage2 
         animation-name: wave1;
         animation-direction: reverse;
         background-image: 
         repeating-linear-gradient(
         -45deg, 
         var(--bw)
         ),
         repeating-linear-gradient(
         45deg, 
         var(--rainbow)
         );


        .homepage3 
         animation-name: wave1;
         animation-direction: normal;
         background-image: 
         repeating-linear-gradient(
         -45deg, 
         var(--bw)
         ),
         repeating-linear-gradient(
         -135deg, 
         var(--rainbow)
         );


        .homepage4 
         animation-name: wave2;
         animation-direction: reverse;
         background-image: 
         repeating-linear-gradient(
         45deg, 
         var(--bw)
         ),
         repeating-linear-gradient(
         135deg, 
         var(--rainbow)
         );


        @keyframes wave1 
         from 
         background-position: 100% 0;
         
         to 
         background-position: 0 100%;
         


        @keyframes wave2 
         from 
         background-position: 100% 100%;
         
         to 
         background-position: 0 0;
         



        body 
        margin: 0;
        padding: 0;
        display: flex;

        <div class="container">
         <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
         <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
         <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
         <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
         <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
         <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
         <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
         <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
        </div>








        share|improve this answer















        I achieve this by making the gradient a repeating gradient, but only using 1 quarter of the full gradient (0% through 25%) That is done by the calc() code



        I need thirds for the second term, because you have 3 color stops (last one is equal to first one).



        Then I scale the background by 4 (opposite of 1 quarter from above).



        I can then animate the background-position






        .homepage 
         width:200px;
         height:200px;
         
         animation: wave 5s linear infinite forwards;
         background-image: repeating-linear-gradient(
         45deg, 
         rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
         rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
         rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
         rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
         );
         background-size: 400% 400%;


        @keyframes wave 
         from 
         background-position: 100% 0;
         
         to 
         background-position: 0 100%;
         

        <div class="homepage">
        </div>





        The direction of the animation is either left diagonal or right diagonal;






        .container 
         line-height: 0px;

        .homepage1,
        .homepage2,
        .homepage3,
        .homepage4 
         width:200px;
         height:200px;
         display: inline-block;
         background-size: 400% 400%;
         animation: 5s linear infinite forwards


        .homepage1 
         animation-name: wave1;
         background-image: repeating-linear-gradient(
         45deg, 
         rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
         rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
         rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
         rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
         );


        .homepage2 
         animation-name: wave2;
         animation-direction: reverse;
         background-image: repeating-linear-gradient(
         -45deg, 
         rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
         rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
         rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
         rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
         );


        .homepage3 
         animation-name: wave2;
         animation-direction: normal;
         background-image: repeating-linear-gradient(
         135deg, 
         rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
         rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
         rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
         rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
         );


        .homepage4 
         animation-name: wave1;
         animation-direction: reverse;
         background-image: repeating-linear-gradient(
         -135deg, 
         rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
         rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
         rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
         rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
         );


        @keyframes wave1 
         from 
         background-position: 100% 0;
         
         to 
         background-position: 0 100%;
         


        @keyframes wave2 
         from 
         background-position: 100% 100%;
         
         to 
         background-position: 0 0;
         

        <div class="container">
         <div class="homepage1"></div><div class="homepage2"></div><br>
         <div class="homepage3"></div><div class="homepage4"></div>
        </div>





        or






        html, body 
         height: 100%;
         padding: 0;

        body 
        display: flex;

        .container 
         display: flex;
         flex-wrap: wrap;
         flex-grow: 1;

        .homepage1,
        .homepage2,
        .homepage3,
        .homepage4 
         flex: 1 1 calc(100% / 8);
         display: inline-block;
         background-size: 400% 400%;
         animation: 5s linear infinite forwards


        :root 
         --rainbow: 
         red calc(100% / 4 * 0 / 6), 
         orange calc(100% / 4 * 1 / 6),
         yellow calc(100% / 4 * 2 / 6),
         green calc(100% / 4 * 3 / 6),
         blue calc(100% / 4 * 4 / 6),
         purple calc(100% / 4 * 5 / 6),
         red calc(100% / 4 * 6 / 6);
         --bw: 
         rgba(000, 000, 000, 0.5) calc(100% / 16 * 0 / 8),
         rgba(020, 020, 020, 0.5) calc(100% / 16 * 1 / 8),
         rgba(127, 127, 127, 0.5) calc(100% / 16 * 2 / 8),
         rgba(235, 235, 235, 0.5) calc(100% / 16 * 3 / 8),
         rgba(255, 255, 255, 0.5) calc(100% / 16 * 4 / 8),
         rgba(235, 235, 235, 0.5) calc(100% / 16 * 5 / 8),
         rgba(127, 127, 127, 0.5) calc(100% / 16 * 6 / 8),
         rgba(020, 020, 020, 0.5) calc(100% / 16 * 7 / 8),
         rgba(000, 000, 000, 0.5) calc(100% / 16 * 8 / 8);


        .homepage1 
         animation-name: wave2;
         background-image: 
         repeating-linear-gradient(
         45deg, 
         var(--bw)
         ),
         repeating-linear-gradient(
         -45deg, 
         var(--rainbow)
         );


        .homepage2 
         animation-name: wave1;
         animation-direction: reverse;
         background-image: 
         repeating-linear-gradient(
         -45deg, 
         var(--bw)
         ),
         repeating-linear-gradient(
         45deg, 
         var(--rainbow)
         );


        .homepage3 
         animation-name: wave1;
         animation-direction: normal;
         background-image: 
         repeating-linear-gradient(
         -45deg, 
         var(--bw)
         ),
         repeating-linear-gradient(
         -135deg, 
         var(--rainbow)
         );


        .homepage4 
         animation-name: wave2;
         animation-direction: reverse;
         background-image: 
         repeating-linear-gradient(
         45deg, 
         var(--bw)
         ),
         repeating-linear-gradient(
         135deg, 
         var(--rainbow)
         );


        @keyframes wave1 
         from 
         background-position: 100% 0;
         
         to 
         background-position: 0 100%;
         


        @keyframes wave2 
         from 
         background-position: 100% 100%;
         
         to 
         background-position: 0 0;
         



        body 
        margin: 0;
        padding: 0;
        display: flex;

        <div class="container">
         <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
         <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
         <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
         <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
         <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
         <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
         <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
         <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
        </div>








        .homepage 
         width:200px;
         height:200px;
         
         animation: wave 5s linear infinite forwards;
         background-image: repeating-linear-gradient(
         45deg, 
         rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
         rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
         rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
         rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
         );
         background-size: 400% 400%;


        @keyframes wave 
         from 
         background-position: 100% 0;
         
         to 
         background-position: 0 100%;
         

        <div class="homepage">
        </div>





        .homepage 
         width:200px;
         height:200px;
         
         animation: wave 5s linear infinite forwards;
         background-image: repeating-linear-gradient(
         45deg, 
         rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
         rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
         rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
         rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
         );
         background-size: 400% 400%;


        @keyframes wave 
         from 
         background-position: 100% 0;
         
         to 
         background-position: 0 100%;
         

        <div class="homepage">
        </div>





        .container 
         line-height: 0px;

        .homepage1,
        .homepage2,
        .homepage3,
        .homepage4 
         width:200px;
         height:200px;
         display: inline-block;
         background-size: 400% 400%;
         animation: 5s linear infinite forwards


        .homepage1 
         animation-name: wave1;
         background-image: repeating-linear-gradient(
         45deg, 
         rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
         rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
         rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
         rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
         );


        .homepage2 
         animation-name: wave2;
         animation-direction: reverse;
         background-image: repeating-linear-gradient(
         -45deg, 
         rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
         rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
         rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
         rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
         );


        .homepage3 
         animation-name: wave2;
         animation-direction: normal;
         background-image: repeating-linear-gradient(
         135deg, 
         rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
         rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
         rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
         rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
         );


        .homepage4 
         animation-name: wave1;
         animation-direction: reverse;
         background-image: repeating-linear-gradient(
         -135deg, 
         rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
         rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
         rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
         rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
         );


        @keyframes wave1 
         from 
         background-position: 100% 0;
         
         to 
         background-position: 0 100%;
         


        @keyframes wave2 
         from 
         background-position: 100% 100%;
         
         to 
         background-position: 0 0;
         

        <div class="container">
         <div class="homepage1"></div><div class="homepage2"></div><br>
         <div class="homepage3"></div><div class="homepage4"></div>
        </div>





        .container 
         line-height: 0px;

        .homepage1,
        .homepage2,
        .homepage3,
        .homepage4 
         width:200px;
         height:200px;
         display: inline-block;
         background-size: 400% 400%;
         animation: 5s linear infinite forwards


        .homepage1 
         animation-name: wave1;
         background-image: repeating-linear-gradient(
         45deg, 
         rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
         rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
         rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
         rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
         );


        .homepage2 
         animation-name: wave2;
         animation-direction: reverse;
         background-image: repeating-linear-gradient(
         -45deg, 
         rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
         rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
         rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
         rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
         );


        .homepage3 
         animation-name: wave2;
         animation-direction: normal;
         background-image: repeating-linear-gradient(
         135deg, 
         rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
         rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
         rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
         rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
         );


        .homepage4 
         animation-name: wave1;
         animation-direction: reverse;
         background-image: repeating-linear-gradient(
         -135deg, 
         rgb(0, 0, 100) calc(100% / 4 * 0 / 3), 
         rgb(125, 24, 27) calc(100% / 4 * 1 / 3),
         rgb(51, 151, 51) calc(100% / 4 * 2 / 3),
         rgb(0, 0, 100) calc(100% / 4 * 3 / 3)
         );


        @keyframes wave1 
         from 
         background-position: 100% 0;
         
         to 
         background-position: 0 100%;
         


        @keyframes wave2 
         from 
         background-position: 100% 100%;
         
         to 
         background-position: 0 0;
         

        <div class="container">
         <div class="homepage1"></div><div class="homepage2"></div><br>
         <div class="homepage3"></div><div class="homepage4"></div>
        </div>





        html, body 
         height: 100%;
         padding: 0;

        body 
        display: flex;

        .container 
         display: flex;
         flex-wrap: wrap;
         flex-grow: 1;

        .homepage1,
        .homepage2,
        .homepage3,
        .homepage4 
         flex: 1 1 calc(100% / 8);
         display: inline-block;
         background-size: 400% 400%;
         animation: 5s linear infinite forwards


        :root 
         --rainbow: 
         red calc(100% / 4 * 0 / 6), 
         orange calc(100% / 4 * 1 / 6),
         yellow calc(100% / 4 * 2 / 6),
         green calc(100% / 4 * 3 / 6),
         blue calc(100% / 4 * 4 / 6),
         purple calc(100% / 4 * 5 / 6),
         red calc(100% / 4 * 6 / 6);
         --bw: 
         rgba(000, 000, 000, 0.5) calc(100% / 16 * 0 / 8),
         rgba(020, 020, 020, 0.5) calc(100% / 16 * 1 / 8),
         rgba(127, 127, 127, 0.5) calc(100% / 16 * 2 / 8),
         rgba(235, 235, 235, 0.5) calc(100% / 16 * 3 / 8),
         rgba(255, 255, 255, 0.5) calc(100% / 16 * 4 / 8),
         rgba(235, 235, 235, 0.5) calc(100% / 16 * 5 / 8),
         rgba(127, 127, 127, 0.5) calc(100% / 16 * 6 / 8),
         rgba(020, 020, 020, 0.5) calc(100% / 16 * 7 / 8),
         rgba(000, 000, 000, 0.5) calc(100% / 16 * 8 / 8);


        .homepage1 
         animation-name: wave2;
         background-image: 
         repeating-linear-gradient(
         45deg, 
         var(--bw)
         ),
         repeating-linear-gradient(
         -45deg, 
         var(--rainbow)
         );


        .homepage2 
         animation-name: wave1;
         animation-direction: reverse;
         background-image: 
         repeating-linear-gradient(
         -45deg, 
         var(--bw)
         ),
         repeating-linear-gradient(
         45deg, 
         var(--rainbow)
         );


        .homepage3 
         animation-name: wave1;
         animation-direction: normal;
         background-image: 
         repeating-linear-gradient(
         -45deg, 
         var(--bw)
         ),
         repeating-linear-gradient(
         -135deg, 
         var(--rainbow)
         );


        .homepage4 
         animation-name: wave2;
         animation-direction: reverse;
         background-image: 
         repeating-linear-gradient(
         45deg, 
         var(--bw)
         ),
         repeating-linear-gradient(
         135deg, 
         var(--rainbow)
         );


        @keyframes wave1 
         from 
         background-position: 100% 0;
         
         to 
         background-position: 0 100%;
         


        @keyframes wave2 
         from 
         background-position: 100% 100%;
         
         to 
         background-position: 0 0;
         



        body 
        margin: 0;
        padding: 0;
        display: flex;

        <div class="container">
         <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
         <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
         <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
         <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
         <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
         <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
         <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
         <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
        </div>





        html, body 
         height: 100%;
         padding: 0;

        body 
        display: flex;

        .container 
         display: flex;
         flex-wrap: wrap;
         flex-grow: 1;

        .homepage1,
        .homepage2,
        .homepage3,
        .homepage4 
         flex: 1 1 calc(100% / 8);
         display: inline-block;
         background-size: 400% 400%;
         animation: 5s linear infinite forwards


        :root 
         --rainbow: 
         red calc(100% / 4 * 0 / 6), 
         orange calc(100% / 4 * 1 / 6),
         yellow calc(100% / 4 * 2 / 6),
         green calc(100% / 4 * 3 / 6),
         blue calc(100% / 4 * 4 / 6),
         purple calc(100% / 4 * 5 / 6),
         red calc(100% / 4 * 6 / 6);
         --bw: 
         rgba(000, 000, 000, 0.5) calc(100% / 16 * 0 / 8),
         rgba(020, 020, 020, 0.5) calc(100% / 16 * 1 / 8),
         rgba(127, 127, 127, 0.5) calc(100% / 16 * 2 / 8),
         rgba(235, 235, 235, 0.5) calc(100% / 16 * 3 / 8),
         rgba(255, 255, 255, 0.5) calc(100% / 16 * 4 / 8),
         rgba(235, 235, 235, 0.5) calc(100% / 16 * 5 / 8),
         rgba(127, 127, 127, 0.5) calc(100% / 16 * 6 / 8),
         rgba(020, 020, 020, 0.5) calc(100% / 16 * 7 / 8),
         rgba(000, 000, 000, 0.5) calc(100% / 16 * 8 / 8);


        .homepage1 
         animation-name: wave2;
         background-image: 
         repeating-linear-gradient(
         45deg, 
         var(--bw)
         ),
         repeating-linear-gradient(
         -45deg, 
         var(--rainbow)
         );


        .homepage2 
         animation-name: wave1;
         animation-direction: reverse;
         background-image: 
         repeating-linear-gradient(
         -45deg, 
         var(--bw)
         ),
         repeating-linear-gradient(
         45deg, 
         var(--rainbow)
         );


        .homepage3 
         animation-name: wave1;
         animation-direction: normal;
         background-image: 
         repeating-linear-gradient(
         -45deg, 
         var(--bw)
         ),
         repeating-linear-gradient(
         -135deg, 
         var(--rainbow)
         );


        .homepage4 
         animation-name: wave2;
         animation-direction: reverse;
         background-image: 
         repeating-linear-gradient(
         45deg, 
         var(--bw)
         ),
         repeating-linear-gradient(
         135deg, 
         var(--rainbow)
         );


        @keyframes wave1 
         from 
         background-position: 100% 0;
         
         to 
         background-position: 0 100%;
         


        @keyframes wave2 
         from 
         background-position: 100% 100%;
         
         to 
         background-position: 0 0;
         



        body 
        margin: 0;
        padding: 0;
        display: flex;

        <div class="container">
         <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
         <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
         <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
         <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
         <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
         <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
         <div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div><div class="homepage1"></div><div class="homepage2"></div>
         <div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div><div class="homepage3"></div><div class="homepage4"></div>
        </div>






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Mar 11 at 8:29

























        answered Mar 8 at 13:31









        yunzenyunzen

        21.7k85081




        21.7k85081





























            draft saved

            draft discarded
















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55063883%2fcss-gradient-animation-coming-as-a-static-slide-show%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            -

            Popular posts from this blog

            Thal And Out Agency railway station See also References External links Navigation menuOfficial Web Site of Pakistan RailwaysArchivedOfficial Web Site of Pakistan Railwayseeexpanding ite

            Image
            Golra Sharif KutbalFatehjangGaganChauntraKahal Basal Junction DomelNammalChura Sharif HaltLangar Jand Junction Khushalgarh Faqir Hussain ShaheedTilkanSeni GambatBabari BandaCadet College Kohat Kohat Cantonment Kohat Tehsil Nasrat Khel Chikarkot Ustarzai Raisan Ibrahimzai Hangu Doaba Darsmand Thal Aab-e-gumAhmedwalAlam RegAlozaiAzadBadinzaiBakhtiarabad DomkiBeleli Bostan Junction Chaman ChurmianDalbandinDamboliDera Allah YarDera Murad JamaliDingraDozanGalangurGatGulistanHirokKan MehtarzaiKhanaiKhan Muhammad ChahKila SaifullahKishingiKoh-e-TaftanKolpurKuchlakMachMangoliMirjavehMushkafMuslimbaghNok KundiNushkiNuttallPadag RoadPerakPehro KunriPanirPeshiQilla Abdullah Quetta Sar-i-AbSheikh MandahSheikh Wasil Sibi Junction Spezand Junction Shela BaghTozghiWali KhanYakmachYaru Zhob IslamabadGolra Sharif Junction Attock City Junction Attock KhurdBahawalpurChiniotDandot RSFaisalabadGujar KhanGujratJalloJhang SadarJhelum Khanewal Junction KhanpurKhewra Lahore Junction Lahore CantonmentLiaquat Pu...
            Read more

            Understanding generators in Python2019 Community Moderator ElectionGenerator function not working pythonFor loop not executing two timesGenerators - Printing generated valuesWhy can a python generator only be used once?What exactly do generators do?What does the “yield” keyword do?What does “list comprehension” mean? How does it work and how can I use it?sklearn Kfold acces single fold instead of for loopIs a generator the callable? Which is the generator?Apply Border To Range Of Cells Using OpenpyxlCalling an external command in PythonWhat are metaclasses in Python?What is the difference between @staticmethod and @classmethod?Finding the index of an item given a list containing it in PythonDifference between append vs. extend list methods in PythonHow can I safely create a nested directory in Python?Does Python have a ternary conditional operator?Understanding slice notationUnderstanding Python super() with __init__() methodsDoes Python have a string 'contains' substring method?

            Image
            What is it called when someone votes for an option that's not their first choice? Have the tides ever turned twice on any open problem? Is xar preinstalled on macOS? "Marked down as someone wanting to sell shares." What does that mean? Does fire aspect on a sword, destroy mob drops? Is VPN a layer 3 concept? Exposing a company lying about themselves in a tightly knit industry: Is my career at risk on the long run? Symbolism of 18 Journeyers How can a new country break out from a developed country without war? What is the difference between something being completely legal and being completely decriminalized? Does convergence of polynomials imply that of its coefficients? Friend wants my recommendation but I don't want to give it to him Why I don't get the wanted width of tcbox? Single word to change groups Would this string work as string? Unfrosted light bulb Air travel with refrigerated insulin What is the tangent at a sharp poi...
            Read more

            How can I change the color of pagination dots of UIPageControl?How to change UIPageControl dotsIs there a way to change page indicator dots colorCustomize dot with image of UIPageControl at index 0 of UIPageControlNo visible @interface for 'NSObject<PageControlDelegate>' declares the selector 'pageControlPageDidChange:'How to change the color of pagination dots in UIPageControl with a different color per pagepagecontrol indicator custom image instead of DefaultChanging the colour of UIPageControl dots in MonoTouchpagecontrol selectable page visibility color?Alternative way to load ViewControllers on a UIPageControlHow to set only layer.border-color for UIpage control dots in swiftHow can I develop for iPhone using a Windows development machine?How to change the name of an iOS app?UITableView - change section header coloruipagecontrol indicator(dot)issueCustom UIPageControl dots color not changingchange the interspace between UIPageControl dotsHow to change Status Bar text color in iOSHow can I change image tintColor in iOS and WatchKitUIPageControl dots with larger space in between each dotsHow to change the color of pagination dots in UIPageControl with a different color per page

            Image
            How do I implement a file system driver driver in Linux? Fly on a jet pack vs fly with a jet pack? Is possible to search in vim history? Translation of Scottish 16th century church stained glass Ridge Regression with Gradient Descent Converges to OLS estimates What linear sensor for a keyboard? Did US corporations pay demonstrators in the German demonstrations against article 13? Is it improper etiquette to ask your opponent what his/her rating is before the game? Why does Async/Await work properly when the loop is inside the async function and not the other way around? Why did the EU agree to delay the Brexit deadline? A Permanent Norse Presence in America Did arcade monitors have same pixel aspect ratio as TV sets? Can the Supreme Court overturn an impeachment? Drawing ramified coverings with tikz Greco-Roman egalitarianism Can someone explain how this makes sense electrically? Is it possible to use .desktop files to open local pdf files on specific pa...
            Read more