注目キーワード

css animation（keyframes）でお気に入りボタン作ってみた

css animation（keyframes）でお気に入りボタン作ってみた
  1. HOME
  2. Web関連
  3. サイト制作
  4. css animation（keyframes）でお気に入りボタン作ってみた
目次

お気に入りボタンをクリックした時動きをだしたい場合におすすめなkeyframes

お気に入りやクリップ機能で、ボタンをクリックした時に動きを出したい時ってありますよね。

gif画像などを作成するのも一つの手段ですが、もっと簡単に実装したい時におすすめなのがCSSのkeyframesです。

今回CSSのkeyframesでクリックした際動きがあるお気に入り星ボタンを作成したのでこちらにメモしておきます。

デモサイトはこちら

DEMO

CSSのkeyframesとは？

CSSのkeyframesは、アニメーションを作成するために使用されるルールセットです。keyframesルールセットは、要素がアニメーションの間にどのように変化するかを指定します。

keyframesルールセットは、@keyframesキーワードを使用して定義されます。具体的な構文は以下の通りです。

keyframes animation-name {
  keyframe-selector-1 {
    /* スタイルのプロパティと値 */
  }
  keyframe-selector-2 {
    /* スタイルのプロパティと値 */
  }
  /* 他のキーフレームセレクター */
}

ここで、animation-nameはアニメーションにつける名前です。keyframe-selectorは、アニメーションの特定の状態（キーフレーム）を表します。キーフレームは、アニメーションの特定のポイントで要素に適用されるスタイルのセットです。

例えば、以下は要素が左から右に移動するアニメーションを作成するkeyframesの例です。

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

上記の例では、キーフレームセレクターとして0%と100%が使用されています。0%では要素が画面の左端から開始し、100%では要素が画面の左端から右端にスライドします。各キーフレームセレクターでは、要素に適用されるスタイル（ここではtransformプロパティ）を指定します。

作成したkeyframesルールセットは、animationプロパティを使用して要素に適用することができます。たとえば、以下のように使用できます。

element {
  animation-name: slide-in;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

上記の例では、.elementクラスの要素にslide-inアニメーションが適用されます。animation-durationはアニメーションの時間、animation-timing-functionはアニメーションのタイミング関数、animation-iteration-countはアニメーションの反復回数を指定します。

このように、keyframesを使用することで、要素に繰り返しアニメーションを追加することができます。

代表的なkeyframes

移動（Translation）
要素を上下左右に移動させる。
要素を斜めに移動させる。
要素を画面内を移動させる。
回転（Rotation）
要素を中心を軸に回転させる。
要素を自転させる。
要素を時計回りまたは反時計回りに回転させる。
拡大縮小（Scale）
要素を拡大または縮小する。
要素の幅や高さを変化させる。
透明度（Opacity）
要素を透明から不透明に徐々に変化させる。
要素を透明から不透明に点滅させる。
色（Color）
要素の背景色やテキスト色を変化させる。
シェイク（Shake）
要素を左右に振動させる。
要素を上下に振動させる。
ふわっと現れる（Fade In）
要素をゆっくりと表示させる。
無限ループ（Infinite Loop）
要素の動きを繰り返し再生させる。

今回実装した星ボタンの内容はこちら↓

HTML

今回の星ボタンはSVGで作成し、コードを直接貼り付けました😊

<div class="btn-wrapper">
    <div class="btn">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.6 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z"/></svg>
    </div>
    <div class="btn-fill star-action">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>
    </div>
</div>

 

CSS

keyframesで作成した動きをstar-actionに読み込ませています。

クリックした際にclass名star-actionを付ければ汎用的に他のボタンにも動きをつけることができて便利です😊

各キーフレームセレクターで、星のスケール（拡大縮小）を指定しています。

0%: スケールが0.5倍になる。10%: スケールが0.7倍になる。30%: スケールが0.9倍になる。50%: スケールが1.2倍になる。80%: スケールが1.5倍になる。100%: スケールが元の大きさ（1倍）に戻る。

各キーフレームセレクターで、transform: scale(x)を使用してスケールの変化を指定しています。scale(x)は、要素のサイズを指定した倍率で拡大縮小するCSSのトランスフォーム関数です。

.btn-wrapper{
  margin: 20% auto;
}
.btn,
.btn-fill{
  display: block;
  margin:0 auto;
  width: 80px;
  cursor: pointer;
}
.btn-fill.star-action {
  display: none;
}
.btn:hover,
.btn-fill:hover{
  opacity: 0.8;
  -webkit-transition: all .2s ease 0s;
  transition: all .2s ease 0s;
}
.btn-fill.star-aciton{
  display: none;
}
.btn svg,
.btn-fill svg{
  fill: #ff9402;
}
.star-action{
  animation: star-animation 0.2s;
}

@-webkit-keyframes star-animation{
  0% {
    transform: scale(0.5);
  }
  10% {
    transform: scale(0.7);
  }
  30% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes star-animation{
  0% {
    transform: scale(0.5);
  }
  10% {
    transform: scale(0.7);
  }
  30% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

jQuery

白抜きの星ボタンをクリックしたらベタ塗り星ボタンに切り替わるので、要素の表示と非表示を切り替えるための関数.toggle()を使用しました。

$(document).ready(function() {
  $(".btn, .btn-fill.star-action").click(function() {
    $(".btn, .btn-fill").toggle();
  });
});

 

　

サイト制作カテゴリの最新記事