CSS looping gradient Transition

Question

I got a question please I want to create a CSS looping gradient animation but when I do it the animation is very static it's not animating smoothly below is an example what I'm currently working on. Hope you can help me please.

.slider1 {
  background: background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255)) !important;
}

/* css animation not smooth */
.slider1 {
  opacity: .5;
  animation: myfirst 5s;
  -moz-animation: myfirst 5s infinite; /* Firefox */
  -webkit-animation: myfirst 5s infinite; /* Safari and Chrome */
}

@-moz-keyframes myfirst { /* Firefox */ 
  0% {
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(0, 174, 255))
  }
  50% {
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(135, 255, 0))
  }
  100% {
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255))
  }
}

@-webkit-keyframes myfirst { /* Safari and Chrome */
  0% {
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(0, 174, 255))
  }
  50% {
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(135, 255, 0))
  }
  100% {
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255))
  }
}

<div class="slider1">
  This some content
  <div class="wsite-spacer" style="height:600px;"></div>
</div>

You can remove vendor-prefixed properties. They are for very old browsers. — Vadim Ovchinnikov
– Vadim Ovchinnikov, Commented Jul 12, 2017 at 15:37
You can't animate gradients like that. Try animating the background-position instead -->gradient-animator.com or look at using pseudoelements --> medium.com/@dave_lunny/… — sol
– sol, Commented Jul 12, 2017 at 15:43
Thank you, can you please show me how i could fix my example? I had read the article of dave but I still couldn't figure out how to fix it in my example — Cody
– Cody, Commented Jul 12, 2017 at 15:55

vals · Accepted Answer · 2017-07-12 19:55:40Z

5

basically your gradint has a fixed color on top, and a varying color in the bottom.

If you construct this gradint as 2 different gradint overlayed, then you can move the one on the bottom and create the changes in color from the changes in position

div {
    width: 400px;
    height: 300px;
    background-image: 
linear-gradient(to top, transparent, red),    
linear-gradient(to right, green, yellow, blue);
    background-size: 100% 100%, 2000% 100%;
    animation: move 5s infinite;
}

@keyframes move {
 from {background-position: center center, left center;}
 to {background-position: center center, right center;}
}

<div></div>

answered Jul 12, 2017 at 19:55

vals

64k11 gold badges96 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Cody Over a year ago

Thanks so much this is the best solution and works like a champ! You're amazing thanks so much!

Cody Over a year ago

One thing i noticed it works on all browsers only on Safari macos. I get a glitch do you know how to fix it please ?

vals Over a year ago

Sorry, I can not test on Safari ... Can you explain what is the glitch ?

Cody Over a year ago

The glitch is now gone. Sorry, I had an old version of safari on my mac installed after updating safari your code woks with no glitches Thanks so much again

Vadim Ovchinnikov · Accepted Answer · 2017-07-12 16:05:57Z

0

You can't animate background but you add blocks with linear-gradient and change their opacity.

.slider1 {
  opacity: .5;
  position: relative;
}

.frame {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  /* animation for 3 block 5 second each, 3 × 5 = 15 */
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.frame1 {
  animation-name: hide1;
  background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255));
}

.frame2 {
  animation-name: hide2;
  background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(135, 255, 0));
}

.frame3 {
  animation-name: hide3;
  background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255));
}

@keyframes hide1 {
  0% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
}

@keyframes hide2 {
  33% {
    opacity: 1;
  }
  67% {
    opacity: 0;
  }
}

@keyframes hide3 {
  67% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div class="slider1">
  This some content
  <div class="wsite-spacer" style="height:600px;"></div>
  <div class="frame frame1"></div>
  <div class="frame frame2"></div>
  <div class="frame frame3"></div>
</div>

answered Jul 12, 2017 at 16:05

Vadim Ovchinnikov

14.1k7 gold badges68 silver badges95 bronze badges

1 Comment

Cody Over a year ago

Thank you very much this is amazing, I just got one last question because I want to apply this gradient loop to a specific slider (Slider Revolution Responsive jQuery) and to get it to work I have to apply the Overlay css color looping on one class only .slider1 that's why I think it wouldn't work on my site if i use .frame and .frame1 but it's an amazing idea if you know how i could apply the same to only one class so it could work with my rev slider jquery that would be very epic

Collectives™ on Stack Overflow

CSS looping gradient Transition

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related