Animate Radial-Gradient CSS3: Move from Left to Right

animate radial-gradient CSS3 : move from left to right?

"but we can see the border of "square" where is the light radial" - Why use radial background at all, simply use:

div

div {  position: absolute;  width: 250px;  height: 250px;  background-color: black;  background-image: url(http://frontend.lostboys.nl/presenations/Icons-fonts/img/chrome.png);  overflow: hidden;}div:after {  content: "";  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: rgb(255, 255, 255);  background: linear-gradient(    90deg,    rgba(250, 250, 250, 0) 0%,    rgba(250, 250, 250, 0.5) 60%,    rgba(250, 250, 250, 0) 100%  );  -webkit-animation: animation 3s ease-in-out infinite;}@-webkit-keyframes animation {  from {    left: -250px;  }  to {    left: 250px;  }}

<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>

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>

Use CSS3 transitions with gradient backgrounds

Gradients don't support transitions yet (although the current spec says they should support like gradient to like gradient transitions via interpolation.).

If you want a fade-in effect with a background gradient, you have to set an opacity on a container element and 'transition` the opacity.

(There have been some browser releases that supported transitions on gradients (e.g IE10. I tested gradient transitions in 2016 in IE and they seemed to work at the time, but my test code no longer works.)

Update: October 2018
Gradient transitions with un-prefixed new syntax [e.g. radial-gradient(...)] now confirmed to work (again?) on Microsoft Edge 17.17134. I don't know when this was added. Still not working on latest Firefox & Chrome / Windows 10.

Update: December 2021
This is now possible in recent Chromium based browsers using the @property workaround (but is not working in Firefox). Please see (and upvote) @mahozad's answer below (or above YMMV).

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>

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>

Endless animated CSS tilted gradient background

Here's a rotating gradient background. http://jsfiddle.net/f5v5d/

HTML

<div id="bgwrap"><div id="bg"></div></div>
<h3>Fancy Backgrounds For Everyone!</h3>

CSS

#bgwrap {
    position:fixed;
    left:0;top:0;right:0;bottom:0;
    overflow: visible;
    z-index:-1;
}
#bg {
    position:absolute;
    left:0;top:0;width:100%;height:100%;
    padding:0;margin:0;
    border-radius: 50%;
    background: linear-gradient(45deg, red, gray, red);
    animation: spin 5s linear infinite;
    -moz-animation: spin 5s linear infinite;
    -webkit-animation: spin 5s linear infinite;
    -ms-animation: spin 5s linear infinite;
}

@keyframes spin {
    from { transform: scale3d(2,2,1) rotateZ(0deg);  }
    to { transform: scale3d(2,2,1) rotateZ(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: scale3d(2,2,1) rotateZ(0deg); }
    to { -moz-transform: scale3d(2,2,1) rotateZ(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: scale3d(2,2,1) rotateZ(0deg); }
    to { -webkit-transform: scale3d(2,2,1) rotateZ(360deg); }
}
@-ms-keyframes spin {
    from { -ms-transform: scale3d(2,2,1) rotateZ(0deg); }
    to { -ms-transform: scale3d(2,2,1) rotateZ(360deg); }
}

How to animate gradient background smoothly

As already pointed out in comments, linear gradients are not transitionable or animatable unlike colors (background-color) because they are considered as image (background-image). Transitions effects are generally achieved by the UA calculating the value at each intermediate stage and then applying that value to the element. In case of an image, it is not possible to calculate the values at intermediate stages and hence they cannot be transitioned.

You need to transition the position (background-position) instead to achieve the effect. This can be done by using a pseudo-element whose background contains the linear-gradient and animating its position on hover. The gradient should go both ways (that is, it should go from rgba(215,54,92,0.9) to rgba(215,54,92,0.5) and then to rgba(215,54,92,0.9)) because it needs to accommodate both phases of the animation and its background-size also needs to be double (that is 200% 200%). Then by animating the positon from 0% 100% to 100% 0% the required effect can be achieved.

#test {  position: relative;  width: 200px;  height: 200px;  background-color: rgba(215, 54, 92, 0.7);  transition: background-color .1s;}#test:hover {  background-color: transparent;  cursor: pointer;}#test:hover:after {  position: absolute;  content: '';  height: 100%;  width: 100%;  background: linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5), rgba(215, 54, 92, 0.9));  background-size: 200% 200%;  background-position: 0% 100%;  animation-name: test_hover;  animation-duration: 4s;  animation-iteration-count: infinite;  animation-timing-function: linear;  animation-direction: alternate;}@keyframes test_hover {  from {    background-position: 0% 100%;  }  to {    background-position: 100% 0%;  }}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><div id="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>

How to animate a ripple effect of a gradient flowing across a background image in CSS

Are you looking for something like below:

body {  margin:0;  height:100vh;  background:    linear-gradient(to right,transparent 33%,white,transparent 66%),    url(https://picsum.photos/id/10/800/800) center;  background-size:300% 100%,cover;  animation:change 2s linear infinite;}
@keyframes change {  from { /*Use "to" to change the direction */    background-position:right,center;  }}
html { background:#fff;}

Animate Radial-Gradient CSS3: Move from Left to Right