色が移り変わる背景

animation を使ってグラデーションを使用したパターン

背景全面に指定しています。
CSS Gradient Animator (https://www.gradient-animator.com/) で作成しました。

コード

body {
   background: linear-gradient(270deg, #4eb49a, #f6d460);
   background-size: 400% 400%;
   -webkit-animation: AnimationName 30s ease infinite;
   animation: AnimationName 30s ease infinite;
}

@-webkit-keyframes AnimationName {
     0%{background-position:0% 50%}
     50%{background-position:100% 50%}
     100%{background-position:0% 50%}
}
@keyframes AnimationName {
     0%{background-position:0% 50%}
     50%{background-position:100% 50%}
     100%{background-position:0% 50%}
}

animation を使って単色のパターン

http://tro.main.jp/wp/ で確認できます。

コード

body {
   background-color: #f9e6e4;
   -webkit-animation: bg-color 10s infinite;
   animation: bg-color 40s infinite;
}

@-webkit-keyframes bg-color {
   0% { background-color: #f9e6e4; }
   20% { background-color: #fff7d9; }
   40% { background-color: #d5f3e2; }
   60% { background-color: #bfddf1; }
   80% { background-color: #e9d5f2; }
   100% { background-color: #f9e6e4; }
}
@keyframes bg-color {
   0% { background-color: #f9e6e4; }
   20% { background-color: #fff7d9; }
   40% { background-color: #d5f3e2; }
   60% { background-color: #bfddf1; }
   80% { background-color: #e9d5f2; }
   100% { background-color: #f9e6e4; }
}