CSSで処理中のアニメーションアイコンを作りました。
コピペで使えるので、ここでメモする。
<style>
.ProcessingBlock {
width: 100%;
display:table;
position:relative;
border:1px solid #CCC;
height: 100%;
}
.Processing {
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
display:table-cell;
vertical-align: middle;
}
.Processing>div.Bounce {
width: 12px;
height: 12px;
background-color: rgba(0,0,255,1);
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
box-sizing: border-box;
}
.Processing>div.Bounce1 {
-webkit-animation-delay: -.64s;
animation-delay: -.64s;
opacity: 0.6;
}
.Processing>div.Bounce2 {
-webkit-animation-delay: -.48s;
animation-delay: -.48s;
opacity: 0.7;
}
.Processing>div.Bounce3 {
-webkit-animation-delay: -.32s;
animation-delay: -.32s;
opacity: 0.8;
}
.Processing>div.Bounce4 {
-webkit-animation-delay: -.16s;
animation-delay: -.16s;
opacity: 0.9;
}
@-webkit-keyframes bouncedelay{
0%,100%,80%{-webkit-transform:scale(0)}
40%{-webkit-transform:scale(1)}
}
@keyframes bouncedelay{
0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}
40%{transform:scale(1);-webkit-transform:scale(1)}
}
</style>
<div style="width:100%;height:100%;margin:0 auto;"
<!-- 本体Start -->
<div class="ProcessingBlock">
<div class="Processing">
<div class="Bounce Bounce1"></div>
<div class="Bounce Bounce2"></div>
<div class="Bounce Bounce3"></div>
<div class="Bounce Bounce4"></div>
<div class="Bounce Bounce5"></div>
</div>
</div>
<!-- //本体END -->
</div>
♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。
★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。
zanmai @2016年03月31日
» ①②③④の順で設定できるはず。…