CSSアニメーションで「伸縮」を実装する

よこのじ（@yokonoji_work）です。

CSSアニメーションでバーが伸縮する動きを実装しましたので、紹介します。

これを応用すれば、画面の切り替わりの際にカーテンが開くようなアニメーションや、左から右／上から下に視線を誘導するような利用ができるかと思います。

伸縮の完成形

今回は「上から下」と「下から上」にバーが伸び縮みするアニメーションを作成しました。

ソースファイルはGitHUBに保存しています。

extend.html

extend.css

伸縮の実装方法

先ほど示したアニメーションの解説をしつつ、横方向の伸縮についても紹介していきます。

まずは、バーの部分のhtml構造です。伸び縮している4本のバーは、4つの空のdivタグから成ります。

<div class="extend">
  <div></div>
  <div></div>
  <div></div>
   <div></div>
</div>

そして、今回は「上から下」と「下から上」のバーを交互に並べているため、次のように nth-child(2n) と nth-child(2n-1)で、extendクラスの偶数番目と奇数番目のdivタグを指定して、それぞれ異なる設定を与えています。

共通部分は .extend div で設定しており、バーの初期状態は非表示にしたいので transform: scaleY(0); としています。

.extend div{
  float: left;
  width: 40px;
  height: 100%;
  transform: scaleY(0);
}
.extend div:nth-child(2n){
  transform-origin: top;
  background-color: #d7d7fa;
}
.extend div:nth-child(2n-1){
  transform-origin: bottom;
  background-color: #d7fad7;
}

transform-origin は、要素を変形（transform）させるにあたっての原点の設定です。

アニメーション時間などの指定は4つのバーで全く一緒なので、nth-child(n) で一括設定しています。

.extend div:nth-child(n){
  animation : extend 1.5s linear 0.0s infinite alternate none running;
}

最後に、@keyframes です。

ここでは、transform: scaleY で要素のY軸方向の伸縮率を0から1（0%から100％）に変更させる設定を与えています。

@keyframes extend{
  0%{
    transform: scaleY(0);
  }
  100%{
    transform: scaleY(1);
  }
}

以上、バーの伸縮を行うCSSアニメーションでした。

今回は縦方向の伸縮で説明をしましたが、transform: scaleX0); のように横軸の伸縮を変化させればこのようなアニメーションを作ることが可能です。