Анимация динамического градиента фона страницы

                        
<style>

@keyframes blink {

  0% {

    background: violet;

  }

  14.3% {

    background: indigo;

  }

  28.6% {

    background: blue;

  }

  42.9% {

    background: green;

  }

  57.2% {

    background: yellow;

  }

  71.5% {

    background: orange;

  }

  85.8% {

    background: red;

  }

  100% {

    background: violet;

  }

}



@-webkit-keyframes blink {

  0% {

    background: violet;

  }

  14.3% {

    background: indigo;

  }

  28.6% {

    background: blue;

  }

  42.9% {

    background: green;

  }

  57.2% {

    background: yellow;

  }

  71.5% {

    background: orange;

  }

  85.8% {

    background: red;

  }

  100% {

    background: violet;

  }

}



div {

  height: 300px;

  width: 300px;

  border: 1px solid black;

  animation: blink 20s linear infinite;

  -webkit-animation: blink 20s linear infinite;

}

</style>

<div></div>