How to Create an Infinite Background Pattern Animation Using Linear-Gradient

How to create an infinite background pattern animation using linear-gradient?

The correct formula should be (20px / cos(45deg)) * N. Then you can make the background-size to be 200% 100% (twice bigger than the element) and you animate it from left to right:

li {
  display: inline-block;
  width: calc( (20px / 0.707) * 3); /*cos(45deg) = 0.707*/
  height: 50px;
  margin-bottom:10px;
  background-color: blue;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, black 10px, black 20px);
  background-size: 200% 100%;
  background-color: blue;
  animation: loading-slide 3s linear infinite;
}

@keyframes loading-slide {
  from {
    background-position: left;
  }
  to {
    background-position: right;
  }
}

.alt li {
  width: calc( (20px / 0.707) * 6);
}

<ul>
  <li>test</li><li>test</li>
</ul>

<ul class="alt">
  <li>test</li><li>test</li>
</ul>

Creating seamless animation with CSS linear gradient

Your gradient consists of 3 parts (between 4 reference points/color definitions), which creates a kind of "asymmetrical" structure since there's a different color at the end than at the beginning. If you add another reference point / color (same as first one), the gradient has the same color at the beginning and end and also in the other two corners of the square, and therefore the animation works smooth:

div {
  border-radius: 2rem;
  width: 10rem;
  height: 10rem;
  background-color: #0dd;
  background-image: 
    linear-gradient( 
      -45deg, 
      rgba( 0,0,0,0.125 ), transparent, rgba( 0,0,0,0.125 ), transparent, rgba( 0,0,0,0.125 )
    );  
}

div {
  animation-name: diagonal_move;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes diagonal_move {
  0% {
    background-position: 0rem 0rem;
  }
  100% {
    background-position: 10rem 10rem;
  }
}

<html>
  <head>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html, body {
        height: 100%;
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>

  <body>
    <div></div>
  </body>
</html>

CSS: how to create an infinitely-moving repeating linear gradient?

You need to run the animation a bit longer before looping back.

@keyframes AnimationName {
    0%{background-position:100% 50%}
    100%{background-position:-33% 50%} /* instead of 0% 50% */
}

I also changed the gradient angle to 90deg because the initial value makes the start and end of the gradient not matching very well

/* instead of 120deg */
background: repeating-linear-gradient(90deg, red,green,blue, green, red);

html, body{
  height: 100%;
  background: #222;
  overflow: hidden;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
}

*{
  color: white;
  font-family: 'Tahoma', sans-serif;
}

#wrapper {
    height: 50px;
    width: 400px;
    position: relative;
    background: #131313;
}

p{
    text-align: center;
    position: absolute;
    width: 100%;
}

#bar {
    background: repeating-linear-gradient(90deg, red,green,blue, green, red);
    background-repeat:repeat-x;
    height: 100%;
    position: absolute;
    background-size: 400% 100%;
    animation: AnimationName 3s linear infinite;
}

@keyframes AnimationName {
    0%{background-position:100% 50%}
    100%{background-position:-33% 50%}
}

<div id="wrapper">
    <div id="bar" style="width: 50%"></div>
    <p>Downloading 5 of 10</p>
  </div>

Using linear gradient breaks the CSS animation

Animations

Animations just work when you define same kind of values.
For example this won't work bacause the margin changes from 10px to auto:

/* This will blink */
@keyframes animationTest {
  0%{margin:10px}
  100%{margin:auto}
}

To make it work, the transition should calculate being equivalent, for example px to px:

@keyframes animationTest {
  0%{margin:10px}
  100%{margin:20px}
}

Adding a second background

Said so, mixing gradients with background images will always blink.
Your solution is to split the values. This is how to apply a second background property without affecting the previous animation

/* add to .hero relative position */
.hero {
  position: relative;
}

/* Define your second background separately. 
You can also apply an animation */
.hero::after {
  content: "";
  position: absolute;
  left:0;
  right:0;
  top:0;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
}

CSS - infinite animation (moving to right loading gradient) is flickering

Please check the updated answer hope it is helpful to you. Currently i don't think it is necessary to move body. But you can define a division inside it and make it absolute which is relative to body.

VW doesn't work well when defined in negative value. Please check the updated answer

@keyframes placeHolderShimmer {  0% {    background-position: 0px 0;  }  100% {    background-position: 100em 0;  }}
.c-animated-background {  animation-duration: 3s;  animation-fill-mode: forwards;  animation-iteration-count: infinite;  animation-name: placeHolderShimmer;  animation-timing-function: linear;  background: fff;  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);  height: 100%;  width: 100%;  position: absolute;  padding-top: 50px;  -webkit-backface-visibility: hidden;  left:0;  right:0;  top:0;  bottom:0;}

<!DOCTYPE html><html>
<head>  <link rel="stylesheet" href="style.css">  <script src="script.js"></script></head>
<body> <div class="c-animated-background"> </div></body>
</html>

CSS: repeated animated background

Maybe like below:

.box {
  height:100px;
  background:linear-gradient(red,blue,yellow,red) 0 0/100% 200%;
  animation:y 2s linear infinite;
}
.box::after {
  content:"";
  display:block;
  height:100%;
  background:linear-gradient(green,lightblue,pink,green) 0 0/100% 200%;
  animation:inherit;
  animation-direction: reverse;
  -webkit-mask:linear-gradient(90deg,#fff 50%,transparent 0) 0 0/20% 100%;
}

@keyframes y {
  to {
    background-position:0 -200%;
  }
}

<div class="box"></div>

Background image linear-gradient animate opacity smoothly

gradients can not be animated for color, or alpha, they can only be animated for position.

Set your gray layer to a bigger dimension in horizonatl, and make it a real gradint, goping from transparent to whatever level of gray you want.

Then, animate also the horizontal position of the gradient, from the transparent side to the gray side

.bg-image {height: 400px;width: 400px;  background-image: linear-gradient(to right,    rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)  ),  url("http://placekitten.com/400/800");  background-position: 0% 50%;  background-repeat: no-repeat;  background-size: 1000% 100%, 100% 200%;  animation: backgroundPosition 4s ease-in infinite;}
@keyframes backgroundPosition {  from {    background-position: 0% 0%, 0% 50%;  }
  to {    background-position: 100% 0%, 0% 100%;  }}

<div class="bg-image"></div>

Infinite scrolling gradient background

I'm not exactly sure this is what you're trying to do, anyway, from the semi-pseudo code presented here, it appears you want to shift the position of a gradient fill along an axis.

It appears the fill is meant to be inclined, so I've added means to determine a rotation angle.

I've kept the LinearGradientBrush to generate the blended fill, though the combination of GraphicsPath and PathGradientBrush is probably more flexible.

To move the gradient fill, I've used a standard System.Windows.Forms.Timer. It's used to translate the fill, incrementing a value that is then set to the translation components of a Matrix in the OnPaint override of a double-buffered Form used as canvas (of course, you can use a PictureBox instead)

The Matrix is also used to rotate the fill, in case it's needed

The Timer's Tick handler also verifies other conditions (bool Fields), that can be used to alter the fill:

useThetaShift enables semi-dynamic motions of the blend intervals (the Position Property)
useTriangular enables and alternate blending feature, generated by the SetBlendTriangularShape() method, which considers only the starting and ending Colors of the LinearGradientBrush and defines the center point of the Colors' fall-off

The sample Form shown here can also be set to auto-scroll, the blending is extended to the DisplayRectangle

The blend is animated also when a modal Dialog is shown (you mentioned an About Window...)

internal class SomeForm : Form {
    private System.Windows.Forms.Timer gradientTimer = null;

    public SomeForm() {
        InitializeComponent();
        if (components is null) components = new Container();
        ResizeRedraw = true;

        startColor = blendColors[0];
        meanColor = blendColors[1];
        endColor = blendColors[blendColors.Length - 1];
        gradientTimer = new System.Windows.Forms.Timer(components) { Interval = 100 };
        gradientTimer.Tick += GradientTimer_Tick;
        gradientTimer.Start();
    }

    float theta = .0f;
    float delta = .005f;
    float tringularShift = .25f;
    float tringularShiftDelta = .015f;
    float speed = 7.5f;
    float rotation = 0f;

    private Color[] blendColors = new[]{ 
        Color.Black, Color.Purple, Color.Teal, Color.Purple, Color.Black
    };
    Color startColor = Color.Empty;
    Color endColor = Color.Empty;
    Color meanColor = Color.Empty;
    PointF translateMx = PointF.Empty;
    bool useThetaShift = false;
    bool useTriangular = false;

    private void GradientTimer_Tick(object sender, EventArgs e)
    {
        if (useTriangular) {
            tringularShift += tringularShiftDelta;
            tringularShift = Math.Max(Math.Min(tringularShift, 1.0f), .35f);
            if ((tringularShift >= 1.0f) | (tringularShift <= .35f)) tringularShiftDelta*= -1;
        }

        if (useThetaShift) {
            theta += delta;
            theta = Math.Max(Math.Min(theta, .15f), 0f);
            if ((theta >= .15f) | (theta <= 0f)) delta*= -1;
        }

        translateMx = PointF.Add(translateMx, new SizeF(speed, speed));
        if (Math.Abs(translateMx.X) >= short.MaxValue) translateMx = PointF.Empty;
        Invalidate();
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        var display = DisplayRectangle;
        using (var mx = new Matrix(1f, 0f, 0f, 1f, translateMx.X, translateMx.Y))
        using (var brush = new LinearGradientBrush(display, startColor, endColor, rotation)) {
            var colorBlend = new ColorBlend(blendColors.Length) {
                Colors = blendColors,
                Positions = new float[] { .0f, .25f + theta, .5f + theta, .75f + theta, 1.0f },
            };
            brush.InterpolationColors = colorBlend;
            mx.Rotate(rotation);
            brush.Transform = mx;
            if (useTriangular) brush.SetBlendTriangularShape(.5f, tringularShift);
            e.Graphics.FillRectangle(brush, display);
        }
        base.OnPaint(e);
    }

    protected override void OnFormClosing(FormClosingEventArgs e) {
        // Move to OnFormClosed() if this action can be canceled
        gradientTimer.Stop();
        base.OnFormClosing(e);
    }
}

I cannot post an animation here, because of the size. You can see how it work directly on Imgur:

Animated LinearGradientPath

How to make my infinite linear animation smooth?

It appears that background-size: 200% 200%; and background-position: 100% 0%; aren't playing nicely together. If you set background-position: 200% 0%; it runs smoothly.

By setting the animation to be twice as long we can make sure it still looks like its moving at the same rate.

@keyframes AnimationName {  0% {    background-position: 200% 0%  }  100% {    background-position: 0% 0%  }}
.myanimation {  width: 50px;  height: 150px;  background: repeating-linear-gradient(-45deg, #43ABC9, #43ABC9 7px, #369ebc 7px, #369ebc 14px);  animation: AnimationName 4s linear infinite;  background-size: 200% 200%;}

<div class="myanimation"></div>

How to Create an Infinite Background Pattern Animation Using Linear-Gradient