WEBデザイン・プログラミング関連の
情報発信を手掛ける STAND4U

HOME > css > CSS3のtransitionでカッコイイ動きの作り方！

CSS3のtransitionでカッコイイ動きの作り方！

Windows Vista SP2延長サポートの2017年4月11日の終了に伴い、IE9とIE10のサポートが終了する事になりました。これでCSS3やHTML5などの新しい技術が堂々と使えるようになります。そのうちのひとつとしてCSS3によりアニメーションの指定ができる「transition」がある。

これまでアニメーションはjQueryに頼ってきたという人にとっては、そろそろ見直さなければならないのが「transition」。今回は「CSS3のtransitionで、簡単にできるかっこいい演出」について解説したいと思います。

［景品表示法に基づく表記］ 本コンテンツにはプロモーションが含まれています。

transitionでつくるcssアニメーションの完成品

「ON/OFF」ボタンを押すとメニューがアニメーションしながら開き、もう一度押すとメニューが消えます。

See the Pen vxMWKz by stand4u (@stand4u) on CodePen.

分かる人はコードを見て部分的にコピペして頂ければ使えると思いますが、今回はこれをわかりやすく順を追って解説していきます。

transitionの使い方

transitionは変化させたいCSSプロパティを指定して、アニメーションの長さ、イージング、待ち時間を設定するという簡単な方法で使う事ができるプロパティです。実行の「タイミング」として、要素のhoverや、jQueryによるaddClassをきっかけにアニメーションするのが一般的です。

transitionの記述の仕方

.hoge {
transition-property: background-color;　　/*変化させるCSSプロパティ名*/
transition-duration:1s; 　　/*アニメーションする時間の長さ*/
transition-timing-function:ease-out;　　/*イージング*/
transition-delay:0.5s;　　/*実行されるまでの待ち時間*/
}

transitionのショートハンドの書き方

.hoge {
    transition: background-color 1s ease-out 0.5s;
}

左から順に、プロパティ、デュレーション、イージング、ディレイの順番です。

HTMLの記述

<div id="bg"></div>
<div id="btn">ON/OFF</div>
<ul id="anime">
  <li>ナビ1</li>
  <li>ナビ2</li>
  <li>ナビ3</li>
  <li>ナビ4</li>
  <li>ナビ5</li>
</ul>

HTMLはごく簡単なボタン（id="btn"）とモーダル用の黒い背景（id="bg"）とリスト形式のナビゲーション（id="anime"）だけです。このHTMLに対してcssでアニメーションをつけて、jQueryでイベントの設定をサポートします。

jQueryの記述

$(function(){
  var flg=0;
  $("#btn").on('click', function(){
    $("#anime").toggleClass("henka");
      if(flg==0){
        $("#bg").fadeIn(300);
        flg=1;
      }else{
        $("#bg").fadeOut(1500);
        flg=0;
      }
  });
});

jQueryではcssではできないクリックによるイベントの設定をしていきます。具体的には（id="btn"）にたいしてクリックイベントの設定です。まず最初にtoggleClassでクラス"henka"をつけます。

次にモーダルっぽい背景の黒色をfadeIn、fadeOutでつけます。

ここで使っている「flg（フラグ）」に馴染みの無い方の為に少し解説します。flg（任意の名前）はスイッチ的な目印の役割をしており、一度クリックすると、flg=0を設定、もう一度押すとflg=1に変更し、if文で「flgが0かそれ以外か」を判断し、flgが0の場合はfadeIn、flgが0以外の時はfadeOutをするという方法で、プログラムでは良く使われる「フラグを立てる」と言われる手法です。

CSSの記述

色やサイズなどの見ための装飾の説明は割愛して、アニメーション部分の説明をしますと「#anime li」に対して先程解説したtransitionの設定をします。

transition: all 0.2s ease-in;
opacity: 0;

今回はプロパティ名にallを設定しています。個別に指定するのが面倒な時はallを設定することで全てのプロパティに対してアニメーションをつける事ができます。また、ディレイの部分は省略する事が可能です。「opacity:0」で初期表示として、透明にしておきます。

次に先程省略していたディレイの設定です。順番にタイミングをズラして表示する為に「li」に対して「nth-child」でひとつずつディレイ時間を変えて設定していきます。

#anime li:nth-child(1){
   transition-delay:0.1s;
}
#anime li:nth-child(2){
   transition-delay:0.2s;
}
#anime li:nth-child(3){
   transition-delay:0.3s;
}
#anime li:nth-child(4){
   transition-delay:0.4s;
}
#anime li:nth-child(5){
   transition-delay:0.5s;
}

変形や移動を設定できるtransform

続いて、動きの設定をします。「transition」でのアニメーションに欠かせないのが「transform」による変形や移動の記述です。transformでは要素の移動「transrate()、translateX()、translateY()」、要素の拡大・縮小「scale()、scaleX()、scaleY()」、要素の回転「rotate()、rotateX()、rotateY()、rotateZ()」などが指定できます。

今回はボタンをクリックする事で「#anime」に対して「クラス"henka"」をつけるようにjQueryで設定したので、「#anime.henka li」に対してアニメーションの後の指定をつけます。つまり初期指定のCSSとこのアニメーション後の指定の差がアニメーションとして表現されるという仕組みです。

今回は横方向にスライドさせて表示させたいので、translageX(30px)と設定しましす。また、透明の状態から表示されるため「opacity:1;」に変化させます。

#anime.henka li{
  transform: translateX(30px);
  opacity: 1;
}

これで無事アニメーションをさせる事ができます。もういちどページ上部のCodePenで確認してみて下さい。

まとめ

CSSのtransitionでのアニメーションはとても簡単なので、工夫しだいでもっとかっこいい演出ができると思います。ようやくIE9 ・IE10を無視できる時代が到来したのでこれを機にゴリゴリCSS3を使っていきましょう！

※当記事の掲載内容は執筆現在の個人の見解・調査によるもので、動作・サービス等を保証するものではありません。最新情報は各公式サイトでご確認頂き、購入・契約・データ作成等はご自身の判断・責任でお願いします。 免責事項

関連記事

WEBデザイン動画講座
YouTubeで学ぶWEBデザイン Uチャンネル Powerd by STAND4U
超短期1日集中 オンラインWEBデザインマンツーマン講座

ナビゲーション

この記事を書いた人

編集長

WEBデザイン・グラフィックデザイン歴：約18年、HTMLコーディング、jquery、wordpress、イラストなど本業とし、WEBデザインコンサル・プログラミング・ライティング等にも勤しんでいます

プロフィールはこちら

WEBデザイン作品集はこちら

Twitter @stand_4u_ をフォロー

新着記事