Edited at

[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 追記しました m(_ _)m*/
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>


必要な条件


  • 適用対象要素には widthheigth が設定されていること

    高さ又は幅が存在しない要素に適用しても、アニメーションは発生しません


  • 適用対象要素は、position: relative; にすることが可能であること

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


  • scssが使用可能なアプリであること

    railsなど(それ以外は申し訳ないですが知りません)



補足

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




  • box-shadowの後ろの数値や色をいじることで修正できます。

    insetを消せば影が要素の外に表示されます。


  • 流れるスピード

    1000msと書いてあるところを修正して下さい。

    1000msだと、1秒に1ローテーションさせることになります。

    スピードを早くしたかったら数値を小さくするとよいです。


  • アニメーション毎の間隔をもう少し空けたい場合

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




  • rgba( , , , )の中の値をいじれば色が変わります。

    4つ目の引数は色の濃さ(透明度)で、0.0で完全な透明、1.0で一切透けないようになります。