LPやHP、ブログで、ボタンやバナーがぷるぷる動いているアニメーション。
申込みや、問い合わせなど、お客様が迷わないように、動きを付ける方法をコピペでできるコードを記載します。
目次
ぷるぷる揺れるボタン

html
CSS
おおきくなったりちいさくなったりするボタン

html
css
かたかた揺れるボタン

html
css
よこにゆらゆら優しく揺れる

html
css

LPやHP、ブログで、ボタンやバナーがぷるぷる動いているアニメーション。
申込みや、問い合わせなど、お客様が迷わないように、動きを付ける方法をコピペでできるコードを記載します。

<p class="furufurubtn"><a href="#"><img src="画像のURL"/></a></p>
.furufurubtn {
animation: furufuru .4s infinite;
}
@keyframes furufuru {
0% {transform: translate(0px, 0px) rotateZ(0deg)}
25% {transform: translate(1px, 1px) rotateZ(1deg)}
50% {transform: translate(0px, 1px) rotateZ(0deg)}
75% {transform: translate(1px, 0px) rotateZ(-1deg)}
100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

<p class="boyoboyo"><a href="#"><img src="画像のURL"/></a></p>
.boyoboyo {
animation: squash 1.2s ease-in-out infinite; /* .boyoboyo側で1.2秒おきにアニメーションを呼び出し実行する */
}
@keyframes squash {
0% {transform: scale(1);}
50% {transform: scale(1.1);}/*大きさを変えたいため、scaleを、1→1.1→1と変化*/
100% {transform: scale(1);}
}

<p class="katakata"><a href="#"><img src="画像のURL"/></a></p>
.katakata {
animation: katakata 1s infinite alternate;
}
@keyframes katakata {
0% {transform: rotate(3deg);}
13% {transform: rotate(-3deg);}
25% {transform: rotate(3deg);}
33% {transform: rotate(-3deg);}
34% {transform: rotate(0deg);}
100% {transform: rotate(0deg);}
}

<p class="yokoyure"><img src="画像のURL"/></p>
.yokoyure {
animation-name:yokoyure1; /* アニメーション名の指定 */
animation-delay:0s; /* アニメーションの開始時間指定 */
animation-duration: 3s; /* アニメーション動作時間の指定 */
animation-timing-function: ease-in-out; /* アニメーションの動き指定(徐々に早く)*/
animation-iteration-count: infinite;
}
@keyframes yokoyure1 {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(1);
}
}
コメント