今回はLPやWEBサイト制作で使えるボタンのCSSループアニメーションを4つ紹介します。
派手すぎず汎用性の高いアニメーションに絞りましたのでぜひお使いください。
ボタンアニメーション4選
任意の画像にクラス名を付け足して、cssにコードを書き足せば簡単に実装できます。
imgタグのパスや画像名は適宜ご自身の環境に合わせて変更してください。
アニメーション01
HTML
<img src="images/cvbtn.png" alt="" class="btn_animate01">CSS
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);}
}
アニメーション02
HTML
<img src="images/cvbtn.png" alt="" class="btn_animate02">CSS
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);}
}
アニメーション03
HTML
<img src="images/cvbtn.png" alt="" class="btn_animate03">CSS
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);}
}
アニメーション04
HTML
<img src="images/cvbtn.png" alt="" class="btn_animate04">CSS
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)}
}派手すぎず程よいアニメーションなのでどんなデザインにも合うと思います＾＾