［CSS初級］@keyframe プロパティで動きのあるボタンを！

2023.10.17
Youtube CSS

1. @keyframesとは？
2. サンプルソース
- 2.1. HTMLの記述
- 2.2. CSSの記述
3. お問い合せはBSTへ！

@keyframesとは？

CSS @ 規則の @keyframes は、アニメーションの流れに沿ったキーフレーム(または中間地点)のスタイルを定義することによって、一連のCSSアニメーションの中間ステップを制御します。これにより、アニメーションの中間ステップをCSS Transitionsよりも詳細に制御できます。
@keyframes – CSS: カスケーディングスタイルシート | MDN

サンプルソース

See the Pen 【@keyframe プロパティ】CSSでボタンが動く！ by BST株式会社 (@BST-web) on CodePen.

HTMLの記述

<a href="" class="button size-up">
  <div class="button--content">    
    <div class="button--text">
      もっと見る
    </div>    
    <div class="button--icon--wrap">
      <i class="button--icon"></i>
    </div>    
  </div>
</a>

CSSの記述

/*リセット*/
body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6rem;
}
.size-up {
  scale: 1.66;
}
a {
  text-decoration: none;
}

/*ボタンスタイル*/
.button {
  font-size: 14px;
  font-weight: 600;
  font-family: "Noto Sans JP", sans-serif;
  display: block;
  width: 225px;
  background: mediumblue;
  color: white;
}

.button--content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  width: 100%;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.75rem;
  box-sizing: border-box;
}

.button--icon--wrap {
  display: flex;
  width: 42.5px;
  height: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.button--icon {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5.5px 0 5.5px 8.5px;
  border-color: transparent
                transparent
                transparent
                white;
}

/*　アニメーション */
.button--text {
  transition: opacity 0.15s ease;
}

.button:hover .button--text {
  opacity: 0.8;
}

.button:hover .button--icon {
  animation-name: animButtonArrow;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

@keyframes animButtonArrow {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(50px);
  }
  51% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0px);
  }
  
}