<div class="box gradation01"></div>

<p>👆 background-positionを動かす</p>

<div class="box gradation02"></div>

<p>👆 background-colorを動かす</p>

.box{

  max-width: 400px;

  height: 100px;

  margin: 20px auto 0;

}

​

.gradation01 {

    background-image: linear-gradient(45deg, #fa8bff 0%, #2bd2ff 50%, #2bff88 100%);

    background-size: 400% 100%;

    animation-name: gradationAnimation;

    animation-duration: 8s;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

    animation-direction: alternate;

}

​

@keyframes gradationAnimation {

    0% {

        background-position: 0 0;

    }

    100% {

        background-position: 100% 0;

    }

}

​

.gradation02 {

    animation-name: gradationAnimation02;

    animation-duration: 8s;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

    animation-direction: alternate;

}

​

@keyframes gradationAnimation02 {

    0% {

        background-color: #fa8bff;

    }

    50% {

        background-color: #2bd2ff;

    }

    100% {

        background-color: #2bff88;

    }

}

​

p{

  text-align: center;

  margin: 0;

}