用途
新着
履歴
言語


  • GoogleAppsScript
  • Git

CSS3 要素を揺らす

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
LINEでシェア
このページの二次元コード
search -  category -  about
© 2019 kipure
Top