[装飾系]アニメーション ハートがドキドキするアニメーション

CSS HTML
 2018.10.02
 2019.11.22

ハートがドキドキするアニメーション

何に使えるかわかりませんが、ハートがドキドキするアニメーションです。

browser:  65 11 20 10 
ニャン易度 
<div class="cp_anime10">
	<div class="cp_spinner cp_heart"></div>
</div>
.cp_anime10 {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}
.cp_anime10 .cp_spinner {
	position: relative;
	display: inline-block;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	width: 48px;
	height: 40px;
}
.cp_anime10 .cp_heart {
	-webkit-animation: anime10_heart 2s ease-in-out infinite;
	        animation: anime10_heart 2s ease-in-out infinite;
}
.cp_anime10 .cp_heart:before,
.cp_anime10 .cp_heart:after {
	position: absolute;
	top: 0;
	display: inline-block;
	width: 24px;
	height: 35px;
	content: ' ';
	border-radius: 12px 12px 0 0;
}
.cp_anime10 .cp_heart:before {
	left: 8px;
	-webkit-transform: rotate(-45deg);
	        transform: rotate(-45deg);
	background-image: -webkit-linear-gradient(254deg, #f093fb 0%, #f5576c 90%);
	background-image: linear-gradient(-164deg, #f093fb 0%, #f5576c 90%);
}
.cp_anime10 .cp_heart:after {
	right: 8px;
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
	background-image: -webkit-linear-gradient(330deg, #f093fb 0%, #f5576c 100%);
	background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
}
@-webkit-keyframes anime10_heart {
	0%  { -webkit-transform: scale(0.9);
				        transform: scale(0.9);
				-webkit-transform-origin: center;
				        transform-origin: center; }
	15% { -webkit-transform: scale(1.4);
				        transform: scale(1.4);
				-webkit-transform-origin: center;
				        transform-origin: center; }
	30% { -webkit-transform: scale(0.9);
				        transform: scale(0.9);
				-webkit-transform-origin: center;
				        transform-origin: center; }
	45% { -webkit-transform: scale(1.4);
				        transform: scale(1.4);
				-webkit-transform-origin: center;
				        transform-origin: center; }
	100%,
	60% { -webkit-transform: scale(0.9);
				        transform: scale(0.9);
				-webkit-transform-origin: center;
				        transform-origin: center; }
}
@keyframes anime10_heart {
	0%  { -webkit-transform: scale(0.9);
				        transform: scale(0.9);
				-webkit-transform-origin: center;
				        transform-origin: center; }
	15% { -webkit-transform: scale(1.4);
				        transform: scale(1.4);
				-webkit-transform-origin: center;
				        transform-origin: center; }
	30% { -webkit-transform: scale(0.9);
				        transform: scale(0.9);
				-webkit-transform-origin: center;
				        transform-origin: center; }
	45% { -webkit-transform: scale(1.4);
				        transform: scale(1.4);
				-webkit-transform-origin: center;
				        transform-origin: center; }
	100%,
	60% { -webkit-transform: scale(0.9);
				        transform: scale(0.9);
				-webkit-transform-origin: center;
				        transform-origin: center; }
}

copypet.jp

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

More Info

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