みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

CSSでグラデーションをアニメーションさせる

CSSでグラデーションをアニメーションさせる方法として、 こちらのサイト でつかわれている、background-positionをつかった方法が有名です。

www.gradient-animator.com



ものすごく単純ですが、今回はafter要素をつかい2つのグラデーションレイヤーを重ねて、上の要素のopacityを変化させるという方法を試してみました。

DEMO

See the Pen CSS Gradation Animation by kimmy (@kimmy) on CodePen.


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;  
  }
}

それっぽく見えるような見えないような感じです。