CSS Gradient Animate

How to Animate Gradients using CSS

Please try this code:

#gradient{    height:300px;    width:300px;    border:1px solid black;    font-size:30px;    background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00);    background-size: 200% 200%;
    -webkit-animation: Animation 5s ease infinite;    -moz-animation: Animation 5s ease infinite;    animation: Animation 5s ease infinite;}
@-webkit-keyframes Animation {    0%{background-position:10% 0%}    50%{background-position:91% 100%}    100%{background-position:10% 0%}}@-moz-keyframes Animation {    0%{background-position:10% 0%}    50%{background-position:91% 100%}    100%{background-position:10% 0%}}@keyframes Animation {     0%{background-position:10% 0%}    50%{background-position:91% 100%}    100%{background-position:10% 0%}}

<html><div id="gradient">  Hello</div></html>

How do I animate a CSS gradient stop with a smooth transition to transparent?

This as of Dec 03 2020 only works on Chrome or Edge 95+

One can animate the gradient using CSS @property.

@property --opacity {
  syntax: '<percentage>';
  initial-value: 100%;
  inherits: false;
}

.test {
    display: inline-block;
    position: absolute;
    border-radius: 100%;
    background-image: conic-gradient(
        red var(--opacity),
        red 10%,
        rgba(255, 0, 0, var(--opacity)),
        transparent,
        transparent
    );
    will-change: transform, background-image;
    width: 200px;
    height: 200px;
    mask:radial-gradient(circle, transparent 47%, white calc(47% + 1px));
    -webkit-mask:radial-gradient(circle, transparent 47%, white calc(47% + 1px));

    animation:
        conic-gradient
            4.5s
            ease-out
            0s
            infinite
            none
            running;
}

@keyframes conic-gradient {
    50% {
        --opacity: 0%;
    }

    85% {
        --opacity: 100%;
    }
}

<div class="test"></div>

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 gradient background animation is not animating

Your code is actually working, just not the way you intended it to do so. The gradient is being animated, the only issue is that it is not moving since you have not set a background-size larger than 100%, therefore the positions you alternate between are the same in this case.

If you declare background-size like below, your gradient background will be animated.

.gb-layout-hero-1 {
    background: linear-gradient(45deg, rgba(9,9,121,1) 25%, rgba(0,212,255,1) 30%);
    background-size: 150%;
    animation: gradient 1300ms linear infinite;
    animation-direction: alternate;
}
@keyframes gradient {
    0% {background-position: 0%}
    100% {background-position: 130%}
}

<div class="gb-layout-hero-1" style="width: 1000%; height:200px;"></div>

CSS Gradient Border Animation Degree Problem

Update your code like below:

.block {
  position: relative;
  margin: 30px auto 0;
  width: 250px;
  height: 250px;
  background: #272727;
}

.block:after {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(-45deg, rgba(0, 0, 0, 0)35%, rgba(0, 204, 255, 1)50%, rgba(0, 0, 0, 0)65%);
  background-size: 400% 400%;
  z-index: -1;
  animation: shine 3s linear infinite;
  filter: blur(8px);
}

@keyframes shine {
  from {
    background-position: 100% 100%
  }
  to {
    background-position: 0 0
  }
}

<div class="block"></div>

How to add transition animation to gradient text background when hovered?

To animate it, instead of trying to animate the gradient, you could animate it's position.

Let's use a new linear gradient for you background.

It will go from the solid color, then it will be a gradient to your
first color from the gradient, then it will be a gradient to the second color of your gradient.

Something like this:

background-image:linear-gradient(to right, #191335, #191335 33.33333%, #01A5F8 66.66666%, #01BFD8);

Then you adapt the size to only see the solid color:

background-size: 300% 100%;

And it's position:

background-position: top left;

All you need to do on hover is to move it:

background-position: top left 100%;

.hover-grad-txt {
  font-size:100px;
  text-align:center;
  color:#191335;
  background-image:linear-gradient(to right, #191335, #191335 33.33333%, #01A5F8 66.66666%, #01BFD8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% 100%;
  background-position: top left;
  transition:all 1s ease-in-out;
}

.hover-grad-txt:hover {
  background-position: top left 100%;
}

<span class="hover-grad-txt">Spear</span>

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>

CSS gradient animation appears standstill

You can adjust your background-size bigger than 100% to animate the background position.

Like background-size: 200% 100%;

:root {
  --yellow: 255, 225, 0;
  --grey: 23, 23, 23;
  --violet: 170, 0, 200;
  --red: 189, 0, 57;
}

.text {
  margin: 40px;
}

.opener {
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  background: linear-gradient(55deg, rgba(var(--red), 0.9), rgba(var(--violet), 0.9));
  background-size: 200% 100%;
  background-color: var(--grey);
  color: white;
  animation: background 2s ease infinite;
}

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

.heading {
    text-align: center;
    font-size: 550%;
}

<div class="opener">
  <h1 class="heading"> Site Title </h1>
  <text class="text"> Some text goes here... </text>
</div>

Image with transparent elements overlayed on animated gradient

Change in h1 div.shimmer {z-index: 2;} to z-index: -1; :

h1
{
display: inline-block;
overflow: hidden;
position: relative;
}

h1 a, h1 div.shimmer
{
height: 100%;
width: 100%;
position: absolute;
top: 0px;

}

h1 a span { display: none; }

h1 div.shimmer
{
background-image: linear-gradient(110deg, rgba(109,246,217,0.60) 25%, rgba(209,246,217,0.70) 37%, rgba(255,255,255,0.98) 50%, rgba(246,176,45,0.70) 85%, rgba(65,226,135,0.60) 99%); /* W3C */
background-repeat: repeat-y;
background-size: 100% 100%;
left: -100%;
z-index: -1;
}
h1:hover div.shimmer
{
left: 100%;
transition: left 1.35s linear;
}

<body>
    <h1>
        <div class="shimmer"></div>
        <img src="https://i.imgur.com/XYoiBsw.png" />
    </h1>
</body>