@charset "utf-8";

/* cursor時に一時停止 */
img[class^="btn_animate"]:hover,
img[class^="btn_animate"]:active {
animation-play-state: paused;
}


/* ゆっくり大小 */
img.btn_animate01 {
margin: 0 auto;
animation: fuwafuwa 1s ease 0s infinite alternate;
transform-origin:center;
cursor: pointer;
}
@keyframes fuwafuwa {
from {transform: scale(0.9,0.9);}
to {transform: scale(1,1);}
}



/* シアーして揺れる */
img.btn_animate02 {
margin: 0 auto;
animation: skew 2.3s linear infinite;
transform-origin:center;
cursor: pointer;
}
/* skewの動きをここで設定 */
@keyframes skew {
0% {transform: skew(0deg, 0deg);}
5% {transform: skew(2deg, 2.2deg);}
10% {transform: skew(-1deg, -1deg);}
15% {transform: skew(0.5deg, 1.2deg);}
20% {transform: skew(-2deg, -1.5deg);}
25% {transform: skew(0.9deg, 0.9deg);}
30% {transform: skew(-0.6deg, -0.6deg);}
35% {transform: skew(0.3deg, 0.3deg);}
40% {transform: skew(-0.2deg, -0.2deg);}
45% {transform: skew(0.1deg, 0.1deg);}
50% {transform: skew(0deg, 0deg);}
}



/* 横揺れ */
img.btn_animate03 {
margin: 0 auto;
animation: beside 2s linear infinite;
transform-origin:center;
cursor: pointer;
}
@keyframes beside {
0% { transform: translate(2px, 0px);}
5% {transform: translate(-2px, 0px);}
10% {transform: translate(2px, 0px);}
15% {transform: translate(-2px, 0px);}
20% {transform: translate(2px, 0px);}
25% {transform: translate(-2px, 0px);}
30% {transform: translate(0px, 0px);}
}



/* 縦揺れ */
img.btn_animate04 {
margin: 0 auto;
animation: vertical 2s linear infinite;
transform-origin:center;
cursor: pointer;
}
@keyframes vertical {
0% {transform: translate(0px, 2px);}
5% {transform: translate(0px, -2px);}
10% {transform: translate(0px, 2px);}
15% {transform: translate(0px, -2px);}
20% {transform: translate(0px, 2px);}
25% {transform: translate(0px, -2px);}
30% {transform: translate(0px, 0px)}
}