用途
新着
履歴
分類

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);
	}
}
公開 2019-07-29 05:58:03
このページの二次元コード
CSS3 要素を揺らす

人気のサンプル

search -  category -  about
© 2024 kipure
Top