コンテンツローディング時のストレスを軽減するとして使われているシマーのサンプルコードを掲載します。
InstagramやAmazon, Twitterなどでよく使われている、灰色背景に白いグラデーション線が動くやつです。
サンプル
<div class="shimmer"></div>
<style>
.shimmer {
height: 300px;
width: 500px;
animation-duration: 1.2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: shimmer;
animation-timing-function: linear;
background: linear-gradient(
-45deg,
#f0f0f0 0%,
#dedede 8%,
#dedede 42%,
#f0f0f0 50%,
#dedede 58%,
#dedede 92%,
#f0f0f0 100%
);
background-size: 1000px 1000px;
}
@keyframes shimmer {
0% {
background-position: 0 0;
}
100% {
background-position: 1000px 0;
}
}
</style>
background-size
の2つの1000px と、@keyframes
内のbackground-position
の1000pxの3箇所は全て同じ値にする必要があります。
shimmerの長辺の2倍位に設定するといい感じに動きます。
コメント