ローディングだけじゃない!コピペでできる!cssアニメーションサンプル8選

CSS HTML
 2018.10.02

cssアニメーションはローディングはもちろんのこと、背景全体のグラデーションを変えたりポイントを目立たせたりと、アイディア次第でいろんなところで使えます。
今回はローディングだけじゃない、cssアニメーションを使ったサンプルをご紹介します。

browser:  65 11 20 10 

アニメーションサンプル[8選]

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

ニャン易度
<div class="cp_anime08"></div>
.cp_anime08 {
	line-height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: block;
	width: 50px;
	height: 50px;
	margin-top: -25px;
	margin-left: -25px;
	cursor: pointer;
	-webkit-animation: anime08_pulse 1.5s infinite;
	        animation: anime08_pulse 1.5s infinite;
	text-align: center;
	color: #ffffff;
	border-radius: 50%;
	background: #e91e63;
	-webkit-box-shadow: 0 0 0 0 rgba(233,30,99 ,0.5);
	        box-shadow: 0 0 0 0 rgba(233,30,99 ,0.5);
}
.cp_anime08:hover {
	-webkit-animation-play-state: paused;
	        animation-play-state: paused;
}
@-webkit-keyframes anime08_pulse {
	0%   { -webkit-transform: scale(0.8);
					       transform: scale(0.8); }
	70%  { -webkit-transform: scale(1);
					       transform: scale(1);
				 -webkit-box-shadow: 0 0 0 50px rgba(233,30,99, 0);
					       box-shadow: 0 0 0 50px rgba(233,30,99, 0); }
	100% { -webkit-transform: scale(0.8);
					        transform: scale(0.8);
				 -webkit-box-shadow: 0 0 0 0 rgba(233,30,99, 0);
					       box-shadow: 0 0 0 0 rgba(233,30,99, 0); }
}
@keyframes anime08_pulse {
	0%   { -webkit-transform: scale(0.8);
					       transform: scale(0.8); }
	70%  { -webkit-transform: scale(1);
					       transform: scale(1);
				 -webkit-box-shadow: 0 0 0 50px rgba(233,30,99, 0);
					       box-shadow: 0 0 0 50px rgba(233,30,99, 0); }
	100% { -webkit-transform: scale(0.8);
					        transform: scale(0.8);
				 -webkit-box-shadow: 0 0 0 0 rgba(233,30,99, 0);
					       box-shadow: 0 0 0 0 rgba(233,30,99, 0); }
}

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

ニャン易度
<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; }
}

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

ニャン易度
<div class="cp_anime10">
	<div class="cp_spinner cp_heart"></div>
</div>

よく見るマップにピンがシュパッと刺さるアニメーション

ニャン易度

グラデーションで色が変わる矢印アニメーション

ニャン易度

グラデーションの背景が徐々に変わるアニメーション

ニャン易度

映画のエンドロールのように文字を流すアニメーション

ニャン易度
En duva satt pa en gren och funderade pa tillvaron
directed by
Roy Andersson
Produce by
Pernilla Sandstrom


I LOVE ○○の文字が切り替わるアニメーション

ニャン易度

I Love

Animal Cat Dog

copypet.jp

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

More Info

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