ホーム » ブログ » CSSで処理中のアニメーションアイコン
このエントリーをはてなブックマークに追加
@2018/05/11

スポンサーリンク
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>

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。
0人
このエントリーをはてなブックマークに追加


★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

お名前:

 

EMAIL:

 

URL:

 

認証コード:

zanmai.net-safecode

 


※会員の方は認証コードを要らないから、新規登録をオススメ!

check