How to rotate smoothly a gradient background css

Question

I have a body gradient background in an html code, and I want it to rotate smoothly. This is the code I have, but it goes only by 2 steps and no substeps.

@keyframes Fond_rotatif {

        0% {
            background: linear-gradient(110deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
        }

        100% {
            background: linear-gradient(135deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
        }
    }

    body {
        background: linear-gradient(135deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
        animation-name: Fond_rotatif;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
    }

Could you help me do it properly?

edit: this is the full html script:

<html>
<head>
    <meta charset="utf-8">
    <title>Page protégée</title>
</head>
<style>
    @keyframes Fond_rotatif {

        0% {
            background: linear-gradient(110deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
        }

        100% {
            background: linear-gradient(135deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
        }
    }

    body {
        background: linear-gradient(135deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
        animation-name: Fond_rotatif;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
    }

    #box_reponse {
        margin-top: 30px;
        border: 1px solid black;
        border-radius: 10px;
        background-color: #b8b3bad1;
        box-shadow: 15px 15px 20px rgb(62, 62, 62);
        width: max-content;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        padding-bottom: 15px;
        padding-left: 25px;
        padding-right: 25px;

    }

    #Reponse {
        line-height: 35px;
        font-size: larger;
    }
</style>

<body>
    <div id="box_reponse"><span id="Reponse">This is a test</span></div>
</body>
</html>

score 0 · Answer 1 · answered Jan 27 '23 at 15:15

try to add more steps between 0% and 100% and use linear and infinite instead of ease out for example

     @keyframes Fond_rotatif {
    0% {
      background: linear-gradient(110deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
    }
  
    25% {
      background: linear-gradient(125deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
    }
  
    50% {
      background: linear-gradient(135deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
    }
  
    75% {
      background: linear-gradient(145deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
    }
  
    100% {
      background: linear-gradient(155deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
    }
  }

  body {
    background: linear-gradient(135deg, black, #3abbe6 20%, black 20.5%, #1b7a99 50%, black 50.5%, #2d5d6e 100%);
    animation-name: Fond_rotatif;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

Thanks, but I tried to do it like this, but if you run the code, you obtain a background that spin, but from step to step, like no in between. It gos from 110deg to 135deg in one single step, without looking good. I hope that I explain weel enought, else, i'm sorry. — Coco, Jan 27 '23 at 15:19

How to rotate smoothly a gradient background css

1 Answers1