CSSアニメーションで「伸縮」を実装する
- 2019.04.13
- Webスキル
よこのじ(@yokonoji_work)です。
CSSアニメーションでバーが伸縮する動きを実装しましたので、紹介します。
これを応用すれば、画面の切り替わりの際にカーテンが開くようなアニメーションや、左から右/上から下に視線を誘導するような利用ができるかと思います。
CSSアニメーションの基本は CSSアニメーション animationプロパティの使い方 をチェック
伸縮の完成形
今回は「上から下」と「下から上」にバーが伸び縮みするアニメーションを作成しました。
ソースファイルはGitHUBに保存しています。
伸縮の実装方法
先ほど示したアニメーションの解説をしつつ、横方向の伸縮についても紹介していきます。
まずは、バーの部分の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); のように横軸の伸縮を変化させればこのようなアニメーションを作ることが可能です。
CSSアニメーションの基本は CSSアニメーション animationプロパティの使い方 をチェック
- 前の記事
CSSアニメーションで「バウンド」を実装する 2019.04.08
- 次の記事
黒い画面から脱却!ターミナル Hyper をポケモンデザインにする 2019.04.15