【追記あり】
※iOSで動かなかったので少し調べたらtransformにベンダープレフィクス付けて動作しました。すみませんでした。
というわけでCSSのソース若干変わっています。。。
スマートフォンでWebサイトを見ていると、画面左（もしくは右）にこんなアイコンが表示されることがあると思います。
いわば「メニューアイコン」なのですが、これが画像やアイコンフォントを使わなくてもHTMLとCSSだけで出来てしまうのです。
今日はその作り方と、さらに「閉じる」ボタンに変化するアニメーションも作ってみます。
もう一度言います。HTMLとCSSだけで作ります！
まずボタンの領域を造ります。
HTML
シンプル。
まぁコレでなくてもいいんですけどね。
僕はこういうリンクをしない場合にa要素を使うのは好きではないのですが、例として、体（てい）としてa要素にしてやります。
本当は別の要素をcursor:pointerでなんとかするのが適切かと思います。
そしてCSS。
CSS
/*ウィンドウ*/ .window{ width: 300px; height:200px; position: relative; background-color:#efefef; border-radius: 4px; } /*アイコン領域*/ a.modal-close{ display: block; width: 25px; height: 25px; position: absolute; top: 10px; right: 10px; } /*2本目*/ a.modal-close>i{ width: 100%; height:3px; margin-top: 11px; margin-bottom: 11px; display: inline-block; background-color: #000; } /*1本目*/ .modal-close:before{ content:""; height:3px; width: 100%; display: inline-block; background-color: #000; position: absolute; top: 0; left: 0; } /*3本目*/ .modal-close:after{ content:""; height:3px; width: 100%; display: inline-block; background-color: #000; position: absolute; bottom: 0; left: 0; }
.windowは都合で指定しているだけですので、実際の状況に合わせて頂いて
その中の.modal-closeに対する指定が重要となります。
1本目と3本目のラインは擬似要素:before :afterで実装しています。
真ん中の2本目のみ、で実装しています。
height: は今回3pxですが必要に応じて変えてください。
アイコンの領域となるa要素には高さと幅を指定します。ここは同じ値にしましょう
そしてposition:absoluteで任意の位置に配置できるようにします。
ちなみに2本目ので実装したラインをどう1,3本目の間に配置するか、ですが
今回はmargin-top margin-bottomと2本目のラインの高さを足してアイコンの高さになるようにしています。
ここまででアイコン自体は完成しました！
確認していませんが、IEでもここまでなら正常に表示されることでしょう。
一応:after , :before擬似要素はIE8から対応していると思うので…
デモ
ではここにおもしろいエフェクトを付けてみます。
3本の平行線が、交差した2本線「×」に変わるアニメーションです。
CSS
/*1本目のアニメーション*/ .modal-close.animation > i{ -webkit-animation: clossAnimationHide; -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; -o-animation: clossAnimationHide; -o-animation-timing-function: ease-in-out; -o-animation-duration: 1s; -o-animation-fill-mode: forwards; animation: clossAnimationHide; animation-timing-function: ease-in-out; animation-duration: 1s; animation-fill-mode: forwards; } /*3本目のアニメーション*/ .modal-close.animation:after{ -webkit-animation: clossAnimation; -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; -o-animation: clossAnimation; -o-animation-timing-function: ease-in-out; -o-animation-duration: 1s; -o-animation-fill-mode: forwards; animation: clossAnimation; animation-timing-function: ease-in-out; animation-duration: 1s; animation-fill-mode: forwards; } /*2本目のアニメーション*/ .modal-close.animation:before{ -webkit-animation: clossAnimationRev; -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: forwards; -o-animation: clossAnimationRev; -o-animation-timing-function: ease-in-out; -o-animation-duration: 1s; -o-animation-fill-mode: forwards; animation: clossAnimationRev; animation-timing-function: ease-in-out; animation-duration: 1s; animation-fill-mode: forwards; }
ほかにもたくさんプロパティの指定で種類はありますが、今回はanimation-name（名前）,animation-timing-function（アニメションの緩急）
animation-duration（アニメーションの長さ）、animation-fill-mode（アニメーション終了後のアニメーション要素の状態）の指定のみしています。
ここでとても大事なのが「animation-fill-mode」です。
通常keyframesで定義したアニメーションは終了するとアニメーション前の状態に戻ってしまいます。
アニメーション後のオブジェクトの状態を定義するのがこのプロパティです。
animation-fill-mode:forwards;で、アニメーション後の状態を維持できます。
web帳 | css3 アニメーション animation-fill-mode
これらのアニメーションを、a要素に.animationというクラスがついた時に動作するようにしています。
ではアニメーションの自体の動作を書きます。
CSS
/*45度傾く｜下から上に動く*/ @-webkit-keyframes clossAnimation { from { transform: rotate(0deg);} to { bottom:42.5%; -webkit-transform: rotate(45deg); } } @-o-keyframes clossAnimation { from { transform: rotate(0deg);} to { bottom:42.5%; -o-transform: rotate(45deg); } } @-moz-keyframes clossAnimation { from { transform: rotate(0deg);} to { bottom:42.5%; -moz-transform: rotate(45deg); } } @keyframes clossAnimation { from { transform: rotate(0deg);} to { bottom:42.5%; transform: rotate(45deg); } } /*-45度傾く｜上から下に動く*/ @-webkit-keyframes clossAnimationRev { from { transform: rotate(0deg);} to { top:42.5%; -webkit-transform: rotate(-45deg); } } @-o-keyframes clossAnimationRev { from { transform: rotate(0deg); } to { top:42.5%; -o-transform: rotate(-45deg); } } @-moz-keyframes clossAnimationRev { from {transform: rotate(0deg);} to { top:42.5%; -moz-transform: rotate(-45deg); } } @keyframes clossAnimationRev { from { transform: rotate(0deg);} to { top:42.5%; transform: rotate(-45deg); } } /*2本目｜消える*/ @-webkit-keyframes clossAnimationHide { from { opacity: 1; -webkit-filter: alpha(opacity=100); } to { opacity: 0; -webkit-filter: alpha(opacity=0); } } @-o-keyframes clossAnimationHide { from { opacity: 1; -o-filter: alpha(opacity=100); } to { opacity: 0; -o-filter: alpha(opacity=0); } } @-moz-keyframes clossAnimationHide { from { opacity: 1;} to {opacity: 0; } } @keyframes clossAnimationHide { from { opacity: 1; filter: alpha(opacity=100); } to { opacity: 0; filter: alpha(opacity=0); } }長げぇ…なげぇよ…
SublimeTextで「@kf」とやるとこのセットが出てくるので書いておきましたが、たぶん-o-とか要らないと思います。↑transformプロパティはまだ草案の段階なので、ベンダープレフィックスの指定は必要ですね…すみません。
fromとToで指定するシンプルな形です。
もっと細かくアニメーションを指定したい場合は「from～to」でなく「％」で区切ってくださいね。
このとき、keyframes{～}内のCSS3プロパティに注意してください。ベンダープレフィックスが、更にここで必要となってくるケースが有ります。
topとbottomから42.5％移動して:before（1本目）と:after（3本目）の線が中央に寄り添うように動かします。
それぞれの高さが3pxなので、領域の高さに対して上手く交差するようにしてください。
このアニメーションを、アイコンをクリックした時に動作するようにしましょう！
jQuery
$('a.modal-close').on('click' , function(event){ event.preventDefault(); $(this).addClass('animation'); }ここでjQueryが登場してしまいます…が、これだけです！内容はいたってカンタン。
アイコン（a.modal-close）をクリックすると、そこに.animationを付加するだけです。
event.preventDefalut();はa要素のリンク機能を無効化しているものです。
jQueryライブラリを事前に読み込んでくださいね
以上を踏まえたものがこちら
いかがでしょうか？
汎用性は決して高くはないですが、UIとしてひとつ、ユーザーに貴重な印象をあたえるかもしれません。
貴重なアニメーションやなめらかな動きは、言葉になる出来事ではないにしろ「なんとなくイイ」と第6感に刷り込む「何か」は大事だと思っています！
でわ！
