6個Hamburger圖標動畫
我用了CSS和一點JavaScript來演示如何制作Hamburger 圖標動畫。
在前面的文章中，我把我對導航欄菜單（也被成為"Hamburger圖標"）的動畫靈感發布出來。結果收到了不少粉絲的稱贊，我先謝謝你們了。
我決定在這方面下多點功夫，于是我寫了一系列不同的動畫實現方式。在這片文章中，你將會看到6個不同"Hamburger"動畫的增強版。
我使用了一點JavaScript來觸發動畫，在繼續研究下去之前，你可以先看看Demo
變化
我之前寫的代碼不算太整潔，改變主要目的是讓代碼更加整潔有序。
首先，我用button元素替換掉了無語意的div。這樣代碼更具有易讀性。
然后我把wrapper的類名命名為.hamburger,在.hamburger里面，我有另外一個元素（一個span標簽），我把它的類名定位.icon
精華
我們的.icon元素是被包裹起來構成一個完整的圖標。
為了讓我們的動畫更加平滑，中間的欄需要足夠的靈活，因此，.icon元素就用來充當Hamburger部分。
至于圖標包裹部分，.hamburger不僅僅是充當wrapper的角色，它也用協助完成整個動畫。所以Hamburger的上下兩塊部分就由.hamburger的偽類來填充。
HTML
<button class="hamburger hamburger-cancel">
<span class="icon"></span>
</button> 正如你所看到的，button元素擔任.hamburger角色。另外一個類名（.hamburger-cancel）是用來區分究竟是什么Hamburger（板燒雞腿還是巨無霸什么的）。我們這里有6中不同口味的漢堡。
JavaScript
正如一開始我說的，我們使用一小段JS代碼來做切換，下面是我的代碼片段
var el = document.querySelectorAll('.hamburger');
for(i=0; i<=el.length; i++) {
el[i].addEventListener('click', function() {
this.classList.toggle('active');
}, false);
} 上面的JavaScript主要是通過綁定點擊時間，把.active類添加到對應元素上。
代碼
下面的CSS代碼設置了我們hamburger元素的默認狀態。你可以適當調整font-size，當然font-size最大值不能超出我們的圖標
除了結構規范，我們也用了CSS transition 屬性來讓動畫更加平滑。
.hamburger {
font-size: 60px;
display: inline-block;
width: 1em;
height: 1em;
padding: 0;
cursor: pointer;
transition: transform .2s ease-in-out;
vertical-align: middle;
border: 0 none;
background: transparent;
}
/**
+ Button height fix for Firefox
*/
.hamburger::-moz-focus-inner {
padding: 0;
border: 0 none;
}
/**
+ Focus fix for Chrome
*/
.hamburger:focus {
outline: 0;
} 現在，是時候繪制我們的Hamburger圖標了。下面的定義可以讓我們更清晰地了解整個過程。
- 頂層面包:
hamburger:before - 中間奧爾良雞腿:
.icon - 底部面包:
.hamburger:after
很明顯，所有圖標的三條杠都有一些共同特性，我們可以把抽出來。
.hamburger:before,
.hamburger:after {
content: "";
}
.hamburger:before,
.hamburger .icon,
.hamburger:after {
display: block;
width: 100%;
height: .2em;
margin: 0 0 .2em;
transition: transform .2s ease-in-out;
border-radius: .05em;
background: #596c7d;
}
/**
+ Styles for the active `.hamburger` icon
*/
.hamburger.active:before,
.hamburger.active .icon,
.hamburger.active:after {
background: #2c3e50;
} 上面的代碼，我們畫了三條杠在.hamburger里面，給點間隙我們就能清晰地看到漢堡圖標了。
為了看上去更圓滑，我們設置了boder-radius屬性。由于我們的元素都是沒有文字的，我們再設置一個背景顏色。
不出意外，我們已經畫出一個山東煎餅。讓我們繼續接下來的動畫部分。
動畫
6種不同口味的漢堡，我們一一來解析。
Vertical Hamburger
用最簡單的方法，要讓漢堡旋轉，我們只需要在.active狀態的時候把它旋轉90deg，或者270deg也行，看起來更酷炫一點。
/**
+ VERTICAL HAMBURGER
*/
.hamburger.hamburger-vertical.active {
transform: rotate(270deg);
} Close/Cancel/Cross
這個圖標的做法就仁者見仁智者見者了，做法有很多，我第一個靈感是當中間的肉餅消失的時候，另外兩個面包旋轉一下，就出來一個X形狀了。
當然了，為了只是旋轉是不夠的。旋轉的同時還要在Y軸上做變化，否則距離有點遠。
/**
+ CLOSE/CANCEL/CROSS
*/
.hamburger.hamburger-cancel.active .icon {
transform: scale(0);
}
.hamburger.hamburger-cancel.active:before {
transform: translateY(.4em) rotate(135deg);
}
.hamburger.hamburger-cancel.active:after {
transform: translateY(-.4em) rotate(-135deg);
} Plus
這個動畫是這樣的：
- 中間的肉餅消失
- 上層面包移動并旋轉來充當垂直的那一杠
- 底部的面包移動并旋轉來充當水平線
這3個動作就可以完成hamburger到plus的動畫了
/**
+ PLUS
*/
.hamburger.hamburger-plus.active .icon {
transform: scale(0);
}
.hamburger.hamburger-plus.active:before {
transform: translateY(.4em) rotate(90deg);
}
.hamburger.hamburger-plus.active:after {
transform: translateY(-.4em) rotate(180deg);
} Minus/Dash
減號的變化是這樣的，中間層還是消失不見，其他兩塊向上向下移動，最終合成一塊。然后同樣地讓他們旋轉個180deg，這樣就很酷炫了~
/**
+ MINUS/DASH
*/
.hamburger.hamburger-minus.active {
transform: rotate(180deg);
}
.hamburger.hamburger-minus.active .icon {
transform: scale(0);
}
.hamburger.hamburger-minus.active:before {
transform: translateY(.4em);
}
.hamburger.hamburger-minus.active:after {
transform: translateY(-.4em);
} Left Arrow
這個包括了移動，旋轉和調整上下兩塊面包。最后加上一個旋轉180deg
/**
+ LEFT ARROW
*/
.hamburger.hamburger-arrow-left.active {
transform: rotate(180deg);
}
.hamburger.hamburger-arrow-left.active:before {
width: .6em;
transform: translateX(.4em) translateY(.2em) rotate(45deg);
}
.hamburger.hamburger-arrow-left.active .icon {
border-radius: .1em .25em .25em .1em;
}
.hamburger.hamburger-arrow-left.active:after {
width: .6em;
transform: translateX(.4em) translateY(-.2em) rotate(-45deg);
} Right Arrow
這個就是左箭頭的鏡面復制了。可以復制左箭頭的代碼，再做適當變更。
/**
+ RIGHT ARROW
*/
.hamburger.hamburger-arrow-right.active {
transform: rotate(180deg);
}
.hamburger.hamburger-arrow-right.active:before {
width: .6em;
transform: translateX(0) translateY(.2em) rotate(-45deg);
}
.hamburger.hamburger-arrow-right.active .icon {
border-radius: .25em .1em .1em .25em;
}
.hamburger.hamburger-arrow-right.active:after {
width: .6em;
transform: translateX(0) translateY(-.2em) rotate(45deg);
} 總結
我在網上找了相似的實現，我發現Sara's Navicon transformicons很酷，健壯并且更有感染力。
我希望你能喜歡這篇文章，可以在下面分享您的想法和建議。感謝閱讀。
本文根據w3bits.com的《Touch-friendly Animated Hamburger Icons》所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉載此譯文，需注明英文出處：http://w3bits.com/animated-hamburger-icons/。
HelKyle
如需轉載，煩請注明出處：http://www.w3cplus.com/css3/animated-hamburger-icons.html