コピペでできる！cssとhtmlのみで作る基本的な動きのアニメーションサンプル

CSS HTML
 
 

cssのanimationでできることって実際どんな感じなのよ？ぶっちゃけ解説はいいから動きが見たいってことで。
基本的な動きのアニメーションサンプルをご紹介します。

browser:  65 11 20 

基本的な動きのアニメーションサンプル[7種]

横にスーッと動くアニメーション

ニャン易度 
<div class="cp_keyframes"></div>
.cp_keyframes {
	margin: 60px 0;
	background: #29b6f6;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	-webkit-animation: keyframes 2s 0.5s infinite alternate;
	        animation: keyframes 2s 0.5s infinite alternate;
}
@-webkit-keyframes keyframes {
	0% {
		opacity: 0;
		-webkit-transform: translateX(0%);
		        transform: translateX(0%);
	}
	100% {
		-webkit-transform: translateX(400%);
		        transform: translateX(400%);
	}
}
@keyframes keyframes {
	0% {
		opacity: 0;
		-webkit-transform: translateX(0%);
		        transform: translateX(0%);
	}
	100% {
		-webkit-transform: translateX(400%);
		        transform: translateX(400%);
	}
}

縦にスーッと動くアニメーション

ニャン易度 
<div class="cp_keyframes"></div>
.cp_keyframes {
	margin: 0px auto;
	background: #29b6f6;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	-webkit-animation: keyframes 2s 0.5s infinite alternate;
	        animation: keyframes 2s 0.5s infinite alternate;
}
@-webkit-keyframes keyframes {
	0% {
		opacity: 0;
		-webkit-transform: translateY(0%);
		        transform: translateY(0%);
	}
	100% {
		-webkit-transform: translateY(200%);
		        transform: translateY(200%);
	}
}
@keyframes keyframes {
	0% {
		opacity: 0;
		-webkit-transform: translateY(0%);
		        transform: translateY(0%);
	}
	100% {
		-webkit-transform: translateY(200%);
		        transform: translateY(200%);
	}
}

横に単純にバウンドするアニメーション

ニャン易度 
<div class="cp_keyframes"></div>
.cp_keyframes {
	margin: 60px  0;
	background: #29b6f6;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	line-height: 60px;
	-webkit-animation: keyframes 0.5s ease-in infinite alternate;
	        animation: keyframes 0.5s ease-in infinite alternate;
}
@-webkit-keyframes keyframes {
	0% {
		-webkit-transform: translateX(130%);
		        transform: translateX(130%);
	}
	100% {
		-webkit-transform: translateX(390%);
		        transform: translateX(390%);
	}
}
@keyframes keyframes {
	0% {
		-webkit-transform: translateX(130%);
		        transform: translateX(130%);
	}
	100% {
		-webkit-transform: translateX(390%);
		        transform: translateX(390%);
	}
}

横にバウンドするアニメーション弾みに合わせてちょっと潰れる

ニャン易度 
<div class="cp_keyframes"></div>
.cp_keyframes {
	margin: 0 0;
	background: #29b6f6;
	border-radius: 50%;
	position: relative;
	top: 100px;
	left:0;
	width: 60px;
	height: 60px;
	-webkit-animation: keyframes 2s infinite;
	        animation: keyframes 2s infinite;
}
@-webkit-keyframes keyframes {
	0% {
		left: 100px;
		-webkit-animation-timing-function: ease-out;
		        animation-timing-function: ease-out;
	}
	25% {
		left: 80px;
		width: 60px;
		-webkit-animation-timing-function: ease-in;
		        animation-timing-function: ease-in;
	}
	50% {
		left: 220px;
		width: 50px;
		-webkit-animation-timing-function: ease-out;
		        animation-timing-function: ease-out;
	}
	75% {
		left: 30px;
		width: 60px;
		-webkit-animation-timing-function: ease-in;
		        animation-timing-function: ease-in;
	}
	100% {
		left: 100px;
	}
}@keyframes keyframes {
	0% {
		left: 100px;
		-webkit-animation-timing-function: ease-out;
		        animation-timing-function: ease-out;
	}
	25% {
		left: 80px;
		width: 60px;
		-webkit-animation-timing-function: ease-in;
		        animation-timing-function: ease-in;
	}
	50% {
		left: 220px;
		width: 50px;
		-webkit-animation-timing-function: ease-out;
		        animation-timing-function: ease-out;
	}
	75% {
		left: 30px;
		width: 60px;
		-webkit-animation-timing-function: ease-in;
		        animation-timing-function: ease-in;
	}
	100% {
		left: 100px;
	}
}

縦に単純にバウンドするアニメーション

ニャン易度 
<div class="cp_keyframes"></div>
.cp_keyframes {
	margin: 0 auto;
	background: #29b6f6;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	-webkit-animation: keyframes 0.5s ease-in infinite alternate;
	        animation: keyframes 0.5s ease-in infinite alternate;
}
@-webkit-keyframes keyframes {
	0% {
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
	}
	100% {
		-webkit-transform: translateY(250%);
		transform: translateY(250%);
	}
}
@keyframes keyframes {
	0% {
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
	}
	100% {
		-webkit-transform: translateY(250%);
		transform: translateY(250%);
	}
}

縦にバウンドするアニメーション弾みに合わせてちょっと潰れる

ニャン易度 
<div class="cp_keyframes"></div>
.cp_keyframes {
	margin: 0 auto;
	background: #29b6f6;
	border-radius: 50%;
	position: relative;
	top: 0;
	width: 60px;
	height: 60px;
	-webkit-animation: keyframes 2s infinite;
	        animation: keyframes 2s infinite;
}
@-webkit-keyframes keyframes {
	0% {
		top: 100px;
		-webkit-animation-timing-function: ease-out;
		        animation-timing-function: ease-out;
	}
	25% {
		top: 50px;
		height: 60px;
		-webkit-animation-timing-function: ease-in;
		        animation-timing-function: ease-in;
	}
	50% {
		top: 150px;
		height: 50px;
		-webkit-animation-timing-function: ease-out;
		        animation-timing-function: ease-out;
	}
	75% {
		top: 50px;
		height: 60px;
		-webkit-animation-timing-function: ease-in;
		        animation-timing-function: ease-in;
	}
	100% {
		top: 100px;
	}
}
@keyframes keyframes {
	0% {
		top: 100px;
		-webkit-animation-timing-function: ease-out;
		        animation-timing-function: ease-out;
	}
	25% {
		top: 50px;
		height: 60px;
		-webkit-animation-timing-function: ease-in;
		        animation-timing-function: ease-in;
	}
	50% {
		top: 150px;
		height: 50px;
		-webkit-animation-timing-function: ease-out;
		        animation-timing-function: ease-out;
	}
	75% {
		top: 50px;
		height: 60px;
		-webkit-animation-timing-function: ease-in;
		        animation-timing-function: ease-in;
	}
	100% {
		top: 100px;
	}
}

横に動きながら小さく逆さまになって戻るアニメーション

ニャン易度
item
<div class="cp_keyframes"></div>
.cp_keyframes {
	margin: 60px auto;
	color: #ffffff;
	background: #29b6f6;
	border-radius: 6px;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	-webkit-animation: keyframes 3s 0.5s infinite alternate;
	        animation: keyframes 3s 0.5s infinite alternate;
}
@-webkit-keyframes keyframes {
	0% {
		-webkit-transform: translate3d(-135px, 0, 0) rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1);
		        transform: translate3d(-135px, 0, 0) rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1);
	}
	50% {
		-webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 180deg) scale3d(0.5, 0.5, 0.5);
		        transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 180deg) scale3d(0.5, 0.5, 0.5);
	}
	100% {
		-webkit-transform: translate3d(135px, 0, 0) rotate3d(0, 0, 1, 360deg) scale3d(1, 1, 1);
		        transform: translate3d(135px, 0, 0) rotate3d(0, 0, 1, 360deg) scale3d(1, 1, 1);
	}
}
@keyframes keyframes {
	0% {
		-webkit-transform: translate3d(-135px, 0, 0) rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1);
		        transform: translate3d(-135px, 0, 0) rotate3d(0, 0, 1, 0deg) scale3d(1, 1, 1);
	}
	50% {
		-webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 180deg) scale3d(0.5, 0.5, 0.5);
		        transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 180deg) scale3d(0.5, 0.5, 0.5);
	}
	100% {
		-webkit-transform: translate3d(135px, 0, 0) rotate3d(0, 0, 1, 360deg) scale3d(1, 1, 1);
		        transform: translate3d(135px, 0, 0) rotate3d(0, 0, 1, 360deg) scale3d(1, 1, 1);
	}
}

cssのanimation設定ってどんな動きができるの？いい感じに設定するにはどうしたらいい？

copypet.jp

cssのanimation設定ってどんな動きができるの？いい感じに設定するにはどうしたらいい？ | copypet.jp｜パーツで探す、web制作に使えるコピペサイト。

cssのanimationプロパティってどんな設定をするとどんな動きになるのか、意外とわかっていない人も多いのでは？…

copypet.jp

記事を見る

copypet.jp

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

More Info

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