HTML/CSSアニメーション初級編：ボタンスワイプをやってみる

## はじめに
HTML/CSSにだいぶ慣れてきた頃、アニメーションを作れるようにもなろう！ということで、
まずは簡単なボタンをホバーしたときのアニメーションを勉強しました。
今回は、スワイプのアニメーションについて記事を残そうと思います。

## 作成方法
今回作成するスワイプは、ボタンをホバーしたときに左から右へ色が塗られていくアニメーションになっています。
完成形は以下のものになります。
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="MWpMMYw" data-user="hkt_mg" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/hkt_mg/pen/MWpMMYw">
  ButtoHoverrEffect_Swipe</a> by hkt (<a href="https://codepen.io/hkt_mg">@hkt_mg</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

それでは順に作成していきましょう。

**1.ボタンの見た目を作成する**
今回は**button-swipe**というクラス名でボタンの見た目を設定します。
HTMLファイルにボタン表示のコードが記載出来たら、cssファイルを開きボタン全体に設定する**c-button**クラスと、
ボタンの見た目を設定する**button-swipe**クラスを作成します。

```html:index.html
    <body>
      <div class="c-button">
        <button class="button-swipe" href="#">左から右にスワイプ</>
      </div>
    </body>
```

 ```CSS:button_swipe.css
    .c-button {
      width: 100%;
      text-align: center;
     }

    .c-button .button-swipe {
    /* 好きな色・大きさでOK */
      position: relative;
      display: block;
      width: 100%;
      max-width: 250px;
      height: 80px;
      color: #00bfff;
      overflow: hidden;
      text-decoration: none;
      border: 1px solid #00bfff;
      background-color: transparent;
    }
```  

**2. 表示されているボタンの左にスワイプさせるための要素を作成する**
ボタンの設定が出来たら、左側に同じサイズの要素を作ります。
これに右に移動させる動きをつけることによって、ボタンに左から色がついていくように見えます。
before要素に作成していきましょう。

```CSS:button_swipe.css
    .c-button {
        /*省略*/
    }

    .c-button .button-swipe {
        /*省略*/
    }

     /* 好きな色(ボタンと色が被らなければ）OK */
    .c-button .button-swipe::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      background-color: #00ffff;
      box-sizing: border-box;
      content: "";
      transform: translateX(-100%);
    }
```

**button-swipe**クラスに`overflow: hidden;`を指定しているため実際には見えませんが、ここまで設定すると、下記画像のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2836751/e22adfb5-092a-8c80-1f0d-e8d31cf50010.png)

スワイプ用の要素を左の位置に配置させてるのが、`transform: translateX(-100%);`です。
これを使うことによって右に配置したり上に配置したりすることも可能です。
例として、`transform: translateX(0);`にすればボタンと同じ位置に配置できますし、
`transform: translateX(100%);`にすれば、ボタンの右に配置できます。

**3. スワイプさせる**
現状のままでは、ボタンにカーソルを置いてもまったく動きがありません。
そこで、ホバーした際にスワイプ用の要素が右に移動するための動きを作成します。
**button-swipe::before**クラスに`transition: transform 0.5s ease-in-out;`を設定し、
**button-swipe:hover::before**クラスに`transform: translateX(0);`を設定します。

```CSS:button_swipe.css
    .c-button .button-swipe::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      background-color: #00ffff;
      box-sizing: border-box;
      content: "";
      transform: translateX(-100%);
      /* 追加 */
      transition: transform 0.5s ease-in-out;
    }

    /* 追加 */
    .c-button .button-swipe:hover::before {
      transform: translateX(0);
    }
```

`transform: translateX(0);`でスワイプした際にどこまで動かすかの指定を、
`transition: transform 0.5s ease-in-out;`で動きをつけています。
`0.5s`部分はアニメーションの時間、
`ease-in-out`部分はイージングと言って、アニメーションの緩急のつけ方になります。
アニメーションの動きについての詳細は[こちら](https://developer.mozilla.org/ja/docs/Web/CSS/transition)をご覧ください。


## おわりに
これでボタンをホバーした時に動きが付くようになりました。完成です。
今回は左から右にスワイプする動きのみでしたが、反対にしたり、上下からスワイプするなども試してみようと思います。