CSS Keyframes Gradient Animation in a Loop

Question

I want to have a CSS-animation where the original background is

background-image: linear-gradient(to right top, #003eb3, #007BFF, #53b2ff, #0097DB, #009b74, #00c785);

How can I create a smooth animation with CSS keyframes to change the position of the color

An example: from 'red, green, blue' to 'blue, red, green' but smooth

Thank you in advance

Rayees AC · Answer 1 · 2020-09-19T14:08:49.667

Can you something like this :)

Added animation by

 animation: GradAnim 3s ease-in-out 0s infinite alternate;

ease-in-out - That is, the change happens slowly both at the beginning and end, and speeds up only in the middle somewhere. This gives soft edges (metaphorically) to the change and generally feels good.

infinite - That is the animation should be played infinite times (for ever).

alternate- Play the animation forwards first, then backwards.

Complete information about animation in CSS

body{
  opacity: 1;
  background: none;
}

body:after,
body:before {
  content: '';
  display: block;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

body:before {
  background: linear-gradient(to right top, blue 0%, green 50%, red 100%);
  animation: GradAnim 3s ease-in-out 0s infinite alternate;
}

body:after {
  background: linear-gradient(to right top, red 0%, green 50%, blue 100%);
  animation: GradAnim 3s ease-in-out -3s infinite alternate;
}

@keyframes GradAnim {
  0%{opacity: 1.0}
  100%{opacity: 0.2}
}

That's great and all but is it possible to change the order of the colors so it would be from "red, green, blue" to "blue, red, green" to "green, blue, red" back to "red, green, blue"? I tried it with changing the order of the colors in the linear gradient but it changed the colors directly with no in-between-animation. If you could nail it, that would be very great. — SayHiToMePls, Sep 19 '20 at 19:14

CSS Keyframes Gradient Animation in a Loop

1 Answers1