技術戦略部より、tipsやノウハウなど技術的な話題を発信いたします。by2019.10.31デザインフェードイン・アウトのスライドメニューをCSSアニメーションで簡単に実装!ブログをご覧のみなさま、こんにちは。デザイン戦略部のJKと申します。今回は弊社サイトにて実装したCSSアニメーションをご紹介しようと思います。少々前にサービスサイト「URIHO」のリニューアルを行い、私はマークアップエンジニアとして携わりました。本稿ではスマホ・タブレットのヘッダの動きに関して取り上げようと思います。見てもらいますとメニューをクリックした後に左から右へスライドし、中のリンク達がずらら~っと表示されます。実はこれ全てCSSのみで対応しているんです。そんなCSSのみで作成したこちらのアニメーションを簡単にご紹介していきたいと思います。今回のポイント疑似セレクタ「checked」によるボタンの実装label要素でボタンとチェックボックスを関連付けるtransitionプロパティを使いアニメーションにする各アニメーションを時間に差をつけて実装するヘッダー要素作成まずは簡単にヘッダー要素を作ります。0;}こんな形で作り、とりあえずページ上にドンと載せます。動きも何もなくただメニューが開いている状態です。次にメニューを左から右にスライドさせたいので初期位置を画面外の左に置きます。.menuに対しleft:-100%;を指定して画面上から綺麗サッパリ左に追いやりましょう。メニューの追いやり成功です。今回はcheckedという疑似セレクタを使い実装していくのでチェックボックスも設置します。</navi></header>labelタグを使いチェックボックスとボタンを関連付けさせる事も忘れないで対応しましょう。チェックボックスと関連付いた様子こんな感じです。メニューを押せばcheckboxにチェックが付きます。チェックボックスは見た目上邪魔なので#menu-checkboxに対しdisplay:none;で非表示にしてしまいましょう。スライド実装さて、次はボタンがクリックされたらメニューを左から右にスライドさせる部分を実装します。内部的にはチェックボックスにチェックが入ったら~という事になります。0;}この「+」というのは隣の要素を指定する疑似セレクタとなります。「checked」はチェックされたら~という指定の疑似セレクタです。上記の場合、チェックボックスがチェックされたらその隣にあるlabel要素の隣のメニュー要素~という指定となるわけです。隣にある.menuクラスが付与されている要素チェック部分実装クリックされたら(チェックボックスにチェックが付いたら)leftが0になるので画面外から画面内に表示されるようになりました。逆にもう一度クリックすると(チェックボックスにチェックがはずれたら)leftが-100%になるので再度画面外に消えます。一瞬で表示・非表示されるのでまだ意図した動きにはなっていません。そこで時間をかけて動かすtransitionプロパティの登場です。時間;」という指定の仕方になります。時間;」というようにカンマ区切りとなります。スライド実装0.7sと指定したことで0.7秒かけてleftが実行されるようになったのでだいぶ意図した動きに近づきました。1;}更にフェードイン・アウト効果も入れるためメニュー要素に対してopacityを指定します。1;を指定し、transitionプロパティにopacityを追加します。フェードイン・アウト実装いい具合にフェードイン・アウトしながらスライドされるようになりました。最後にメニュー内の各リンクがずららっと表示される部分を実装します。1.2s;}この動きは各リンクのアニメーションにかける時間に差異を付けることで実装しています。今回はtransitionプロパティの時間指定をそれぞれ変えます。実装できました!と、こういった感じでとても簡単に実装できると思うのですがいかがでしょう。なによりCSSのみで実装できるというのがとても強みです。本稿をご覧いただいたみなさまもお試しください。