画像やテキストなど要素を目立たせるために縦や横に揺らすサンプルです。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);
}
}
