[CSS] 待機時間に表示すると少しだけおしゃれになるかも？なCSSアニメーション

概要

Webアプリのデザインをほんの少しだけでもおしゃれにできないかな...？
という気持ちから生まれた、効率度外視な努力の成果を紹介する記事です。

デモ

かめさんのIT実験室: 波打つ背景
このデモが気に入った人は、以下のソースコードをご利用くださいー

ソースコード

以下のcssをコピー&ペーストしたら、

xxx.scss

.gradient-wave {
  position: relative;
  animation: shade-wave 3000ms cubic-bezier(0.545, 0.080, 0.520, 0.975) infinite;
  overflow: hidden;

  /* 疑似要素 before を生成 */
  &:before{
    position: absolute;
    top: 0; /* 2019/04/24 追記しました ｍ（_ _）ｍ*/
    animation: slide-wave 1000ms cubic-bezier(0.545, 0.080, 0.520, 0.975) infinite;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.0), rgba(120, 255, 161, .2));
    content: '';
    height: 100%;
    width: 100%;
  }

  @keyframes slide-wave {
    0%   { left: -100%; }
    40%  { left: -100%; }
    100% { left:   70%; }
  }
  @keyframes shade-wave {
    0%   { box-shadow: inset 0px 0px 2px 2px rgba( 0, 255, 220, 0.3); }
    50%  { box-shadow: inset 0px 0px 2px 2px rgba(50, 255, 200, 0.2); }
    100% { box-shadow: inset 0px 0px 2px 2px rgba( 0, 255, 220, 0.3); }
  }
}

あとは適用したい要素に gradient-waveというclassを付加するだけ！

xxx.html

<div class='gradient-wave'>
  ...
</div>

必要な条件

• 適用対象要素には width と heigth が設定されていること
  高さ又は幅が存在しない要素に適用しても、アニメーションは発生しません

• 適用対象要素は、position: relative; にすることが可能であること
  position: を変更すると見た目が崩れるような要素や、relative以外でなければならない要素には、上手く適用できないことがあります

• scssが使用可能なアプリであること
  railsなど（それ以外は申し訳ないですが知りません）

補足

影の厚さとか、流れるスピードとか、色とかは自由に調整してやってください。

• 影
  box-shadowの後ろの数値や色をいじることで修正できます。
  insetを消せば影が要素の外に表示されます。

• 流れるスピード
  1000msと書いてあるところを修正して下さい。
  1000msだと、1秒に1ローテーションさせることになります。
  スピードを早くしたかったら数値を小さくするとよいです。

• アニメーション毎の間隔をもう少し空けたい場合
  アニメーションの間隔を開けたい場合は、40%の部分を50%や60%へとあげてみてください。

• 色
  rgba( , , , )の中の値をいじれば色が変わります。
  4つ目の引数は色の濃さ（透明度）で、0.0で完全な透明、1.0で一切透けないようになります。