動くボタンをコピペで使える！アニメーションの作り方解説

CSS

2023.08.082023.08.09

各種動くボタンを紹介します。コピペで使えるので、ぜひ使用してください。

共通HTML
左右に動くボタン
1. CSS
上下に動くボタン
1. CSS
左右に傾くボタン
1. CSS
ぷよぷよっぽいボタン
1. CSS
ゼリーっぽいボタン
1. CSS
ガタガタするボタン
1. CSS
光り輝くボタン
1. CSS

共通HTML

クラス名とボタンのパスをそれぞれ入力して使用してください。

<div class="クラス名"><img src="ボタンのパス" alt="ボタンの説明"></div>

左右に動くボタン

CSS

.sway {
    animation: sway 1s infinite alternate;
  }
  @keyframes sway {
    0%, 100% { transform: translateX(0); }
    25%, 75% { transform: translateX(-5px); }
    50% { transform: translateY(0); }
  }

sway クラスが付与された要素は、1秒かけて左に5ピクセル移動し、元の位置に戻るアニメーションが、繰り返される。

上下に動くボタン

CSS

.bounce {
    animation: bounce 1s infinite alternate;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    25%, 75% { transform: translateY(-5px); }
    50% { transform: translateY(0); }
}

bounce クラスが付与された要素は、1秒間で上に5ピクセル移動し、元の位置に戻る動きのアニメーションを、繰り返される。

左右に傾くボタン

CSS

.swing img {
  animation: swing 2s infinite;
}
@keyframes swing {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
}

swing img セレクターに一致する画像は、2秒の間で時計回りに10度、その後反時計回りに10度、そして再び元の位置に戻るアニメーションを、繰り返す。

ぷよぷよっぽいボタン

CSS

.puyopuyo {
  animation: puyopuyo 2s ease-in-out infinite;
  opacity: 1;
}
@keyframes puyopuyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  30%, 50%, 70% {
    transform: scale(0.95);
  }
}

puyopuyo クラスが付与された要素は、2秒間で要素がわずかに0.95倍に縮小して、再び元のサイズに戻るアニメーションを繰り返す。

ゼリーっぽいボタン

CSS

.jelly {
  animation: jelly 2.5s infinite;
  opacity: 1;
}
@keyframes jelly {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
  40% {
    transform: skew(0.6deg, 0.9deg);
  }
  50% {
    transform: skew(0.9deg, 0.9deg);
  }
}

jelly クラスが付与された要素は、2.7秒間の期間で複数の歪みのパターンを示し、それを繰り返すアニメーションが適用される。この歪みの動きは、要素がゼリーのように、揺れているかのような視覚効果を生み出す。

ガタガタするボタン

CSS

.shiver img{
animation:shiver 2s infinite;margin-left:auto;margin-right:auto}
@keyframes shiver{
0%{
transform:translate(0px, 0px) rotateZ(0deg)
}
5%{
transform:translate(4px, 4px) rotateZ(2deg)
}
10%{
transform:translate(0px, 4px) rotateZ(0deg)
}
15%{
transform:translate(4px, 0px) rotateZ(-2deg)
}
20%{
transform:translate(0px, 0px) rotateZ(0deg)
}
100%{
transform:translate(0px, 0px) rotateZ(0deg)
}
}

shiver クラスが付与された<img>タグは、2秒間の期間で微細な移動と回転を繰り返し、返すアニメーションが適用される。この動きは、画像が震えるかのような視覚効果を生み出す。

光り輝くボタン

CSS

.shine {
    opacity: 1;
    overflow: hidden;
    position: relative;
    cursor: pointer;
  }
.shine::before {
    background-color: #fff;
    content: "";
    display: block;
    position: absolute;
    top: -100px;
    left: 0;
    width: 30px;
    height: 100%;
    opacity: 0;
    animation: shine 2.5s linear infinite;
  }
  @keyframes shine {
    0%, 20% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  24% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  28% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  32% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  40%, 100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

shine クラスを持つ要素は、要素の上にスライドするように、表示される白色の疑似要素によって、一定の周期で「光る」効果を持つ。