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

            Identity Server 4 is not redirecting to Angular app after login2019 Community Moderator ElectionIdentity Server 4 and dockerIdentityserver implicit flow unauthorized_clientIdentityServer Hybrid Flow - Access Token is null after user successful loginIdentity Server to MVC client : Page Redirect After loginLogin with Steam OpenId(oidc-client-js)Identity Server 4+.NET Core 2.0 + IdentityIdentityServer4 post-login redirect not working in Edge browserCall to IdentityServer4 generates System.NullReferenceException: Object reference not set to an instance of an objectIdentityServer4 without HTTPS not workingHow to get Authorization code from identity server without login form

            Image
            How to make healing in an exploration game interesting What's the meaning of “spike” in the context of “adrenaline spike”? Welcoming 2019 Pi day: How to draw the letter π? Do I need life insurance if I can cover my own funeral costs? What do Xenomorphs eat in the Alien series? Python if-else code style for reduced code for rounding floats My adviser wants to be the first author Do I need to get involved in office politics to get ahead? Why one should not leave fingerprints on bulbs and plugs? How to change two letters closest to a string and one letter immediately after a string using notepad++ Why doesn't the EU now just force the UK to choose between referendum and no-deal? How to deal with taxi scam when on vacation? Recruiter wants very extensive technical details about all of my previous work What is the least resource intensive way to generate the luatex font cache for a new font? How Could an Airship Be Repaired Mid-Flight ...
            Read more

            2005 Ahvaz unrest Contents Background Causes Casualties Aftermath See also References Navigation menue"At Least 10 Are Killed by Bombs in Iran""Iran"Archived"Arab-Iranians in Iran to make April 15 'Day of Fury'"State of Mind, State of Order: Reactions to Ethnic Unrest in the Islamic Republic of Iran.10.1111/j.1754-9469.2008.00028.x"Iran hangs Arab separatists"Iran Overview from ArchivedConstitution of the Islamic Republic of Iran"Tehran puzzled by forged 'riots' letter""Iran and its minorities: Down in the second class""Iran: Handling Of Ahvaz Unrest Could End With Televised Confessions""Bombings Rock Iran Ahead of Election""Five die in Iran ethnic clashes""Iran: Need for restraint as anniversary of unrest in Khuzestan approaches"Archived"Iranian Sunni protesters killed in clashes with security forces"Archived

            Image
            Sheikh Khazal (1924)Unrest (1925)Unrest (1928)Unrest (1940)1943 revolt1945 revoltInsurgency (1956-70)Insurgency (1979)Embassy siege (1980)Unrest (2005)2005–06 Ahvaz bombingsDay of Rage (2011)Uprising of Dignity (2018) Arab rebellionsProtests in Iran2005 riotsPolitical riots2005 in IranAhvazKhuzestan conflictHuman rights in IranAhwazi Arabs Iranian ArabsAhvazKhuzestanbombingsPersian GulfKhuzestanShadeganHoveyzehSusangerdMahshahrKhorramshahrAbadanAhvazConstitution of IranPersianofficial languageconstitution of the Islamic RepublicconstitutionIranian ArabsAmnesty InternationalConstitution of the Islamic Republic of IranMohammad-Ali AbtahiMohammad KhatamiAmnesty InternationalAli ShamkhaniAhvazIranian ArabsprotestAhvazNobel Peace PrizeShirin Ebadi 2005 Ahvaz unrest Part of Arab separatism in Khuzestan Iranian Khuzestan province Date 15–18 April 2005 Methods demonstrations, riots Status Unrest quelled Parties to the civil conflict Iranian Arabs Iranian Government Lead figures ...
            Read more

            Can't initialize raids on a new ASUS Prime B360M-A motherboard2019 Community Moderator ElectionSimilar to RAID config yet more like mirroring solution?Can't get motherboard serial numberWhy does the BIOS entry point start with a WBINVD instruction?UEFI performance Asus Maximus V Extreme

            Image
            "One can do his homework in the library" Why does Deadpool say "You're welcome, Canada," after shooting Ryan Reynolds in the end credits? Potential difference and current flow It's a yearly task, alright Co-worker team leader wants to inject the crap software product of his friends into our development. What should I say to our common boss? Touchscreen-controlled dentist office snowman collector game What to do when during a meeting client people start to fight (even physically) with each others? What options are left, if Britain cannot decide? How could our ancestors have domesticated a solitary predator? Professor being mistaken for a grad student When two POV characters meet Replacing Windows 7 security updates with anti-virus? What has been your most complicated TikZ drawing? Can the word "advantage" be used as an adjective? How could a female member of a species produce eggs unto death? Can the druid cantrip Thorn...
            Read more