Animating Linear Gradient Using CSS

Animating Linear Gradient 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>

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>

How to animate linear-gradient from top left to bottom right?

Youn need to adjust the gradient then consider percentage value to have a better effect:

.Box {
  height: 100px;
  width: 100px;
  margin: 16px;
  background: #f6f7f8;
  border-radius: 50%;
}
.Shine {
  display: inline-block;
  background: 
    linear-gradient(to bottom right, #eeeeee 40%, #dddddd 50%, #eeeeee 60%);
  background-size:200% 200%;
  background-repeat: no-repeat;
  animation:placeholderShimmer 2s infinite linear;
}

@keyframes placeholderShimmer {
  0% {
    background-position:100% 100%; /*OR bottom right*/
  }

  100% {
    background-position:0 0; /*OR top left*/
  }
}

<div class="Shine">
 <div class="Box"></div>
</div>

How to animate a radial-gradient using CSS?

You can do the gradient differently and animate the position. The trick is to double the size of the gradient and make the value of color stop half of their actual values so you keep the same visual gradient then you can animate it from left to right.

It won't look exactly the same as the gradient you defined in the animation due to the calculation of farthest-corner.

#shine-div {
  height: 30vh;
  width: 60vw;
  margin-right: auto;
  margin-left: auto;
  border-radius: 10px;
  background: radial-gradient(farthest-corner at top, #FFFFFF 0%, #ffb3ff 4%, #ff33ff 12.25%, #800080 31.25%, #b300b3 50%) top right/200% 200%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  animation: colorChange 5s infinite alternate;
}

@keyframes colorChange {
  to {
    background-position:top left;
  }
 }

<div id="shine-div">
  Shine
</div>

CSS linear gradient progress animation

You can rely on background-size animation and steps() like below:

.toastDiv {  border: 1px solid rgba(0, 0, 0, .5);  border-radius: 5px;  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25);  margin: 0 0 1ex 0;  padding: 1ex 1em;  background:    linear-gradient(aliceblue,aliceblue) left no-repeat,    white;  animation: toastProgress 5s steps(10,start); }
@keyframes toastProgress {  0% {    background-size:0% 100%;  }  100% {    background-size:100% 100%;  }}

<div class="toastDiv">hello</div>
<div class="toastDiv" style="animation-timing-function:ease">without Steps</div>

CSS Background: Linear Gradient - Animation is not functioning as Wished to be

You have to add alternate to your animation setting (for the animation-direction):

.user-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  animation: bg-slide 1.5s ease infinite alternate;
  border: 6px solid rgba(255, 255, 255, 0.12);
  background: 0 0/300% 300% linear-gradient(-60deg, #eee 40%, #18d26e 50%, #eee 60%);
}

@keyframes bg-slide {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: 0 50%;
  }
}

<img src="https://images.unsplash.com/photo-1630208232589-e42b29428b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8cHJvZmlsZSUyMHBob3RvfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400&q=60" alt="user-image" class="user-img" />