CSSでグラデーションをアニメーションさせる方法として、 こちらのサイト でつかわれている、background-positionをつかった方法が有名です。
ものすごく単純ですが、今回はafter要素をつかい2つのグラデーションレイヤーを重ねて、上の要素のopacityを変化させるという方法を試してみました。
HTML
<div class="grad"></div>
SCSS
.grad { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(#dead45, #e38ab8); &:after { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ""; background: linear-gradient(#54c9c2, #b0dea6); animation: fade 10s ease-in-out infinite alternate; } } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } }
それっぽく見えるような見えないような感じです。