[装飾系]アニメーション　ポイントを目立たせるのに使えるアニメーション2

CSS HTML
 2018.10.02

ポイントを目立たせるのに使えるアニメーション2

目立たせたいポイントやボタンなどにも使えるパルス系のアニメーションです。

browser:  65 11 20 10 
ニャン易度  
<div class="cp_anime09">
	<div class="cp_center"></div>
	<div class="cp_explosion"></div>
</div>
.cp_anime09 {
	line-height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
}
.cp_anime09 .cp_center,
.cp_anime09 .cp_explosion {
	position: absolute;
	width: 50px;
	height: 50px;
	border-radius: 50%;
}
.cp_anime09 .cp_center {
	-webkit-animation: anime09_pulse 1.5s infinite;
	        animation: anime09_pulse 1.5s infinite;
	opacity: 0.8;
	background: rgba(103,58,183 ,1);
}
.cp_anime09 .cp_explosion {
	-webkit-animation: anime09_pulseradius 1.5s infinite;
	        animation: anime09_pulseradius 1.5s infinite;
	background: rgba(103,58,183 ,0.5);
}
@-webkit-keyframes anime09_pulse {
	30% { -webkit-transform: scale(0.7);
				        transform: scale(0.7);
				opacity: 0.8; }
	50% { -webkit-transform: scale(1.1);
				        transform: scale(1.1);
				opacity: 1.0; }
	70% { -webkit-transform: scale(0.8);
				        transform: scale(0.8);
				opacity: 0.8; }
}
@keyframes anime09_pulse {
	30% { -webkit-transform: scale(0.7);
				        transform: scale(0.7);
				opacity: 0.8; }
	50% { -webkit-transform: scale(1.1);
				        transform: scale(1.1);
				opacity: 1.0; }
	70% { -webkit-transform: scale(0.8);
				        transform: scale(0.8);
				opacity: 0.8; }
}
@-webkit-keyframes anime09_pulseradius {
	30%  { -webkit-transform: scale(0.7);
					       transform: scale(0.7);
				 opacity: 1; }
	40%  { -webkit-transform: scale(7.8);
					       transform: scale(7.8);
				 opacity: 0.1; }
	80%  { -webkit-transform: scale(4.8);
					       transform: scale(4.8);
				 opacity: 0; }
	100% { -webkit-transform: scale(1);
					       transform: scale(1);
				 opacity: 0; }
}
@keyframes anime09_pulseradius {
	30%  { -webkit-transform: scale(0.7);
					       transform: scale(0.7);
				 opacity: 1; }
	40%  { -webkit-transform: scale(7.8);
					       transform: scale(7.8);
				 opacity: 0.1; }
	80%  { -webkit-transform: scale(4.8);
					       transform: scale(4.8);
				 opacity: 0; }
	100% { -webkit-transform: scale(1);
					       transform: scale(1);
				 opacity: 0; }
}

copypet.jp

CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか？