定番
履歴

CSS3 要素を揺らす

CSS3 要素を揺らす

画像やテキストなど要素を目立たせるために縦や横に揺らすサンプルです。CSS3で実装しています。

位置を移動させループ再生をしています。

縦に揺らす


.demo_neko {
	animation: tateyure 3s ease 0.4s forwards infinite;
	transition: transform 0.4s;
	width:200px;
}
@keyframes tateyure {
	90% {
	transform: translateY(0);
	}
	93% {
	transform: translateY(-20px);
	}
	96% {
	transform: translateY(10px);
	}
	100% {
	transform: translateY(0);
	}
}


横に揺らす


.demo_neko2 {
	animation: yokoyure 3s ease 0.4s forwards infinite;
	transition: -webkit-transform 0.4s;
	transition: transform 0.4s;
	width:200px;
}
@keyframes yokoyure {
	90% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
	93% {
	-webkit-transform: translateX(-20px);
	transform: translateX(-20px);
	}
	96% {
	-webkit-transform: translateX(10px);
	transform: translateX(10px);
	}
	100% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
}
2017-11-10 07:32:03
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top