<div class="container">
<h1>Hamburger Icon Animations</h1>
<div class="row cf">
<div class="three col">
<div class="hamburger" id="hamburger-1">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<div class="three col">
<div class="hamburger" id="hamburger-2">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<div class="three col">
<div class="hamburger" id="hamburger-3">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<div class="three col">
<div class="hamburger" id="hamburger-4">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row cf">
<div class="three col">
<div class="hamburger" id="hamburger-5">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<div class="three col">
<div class="hamburger" id="hamburger-6">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<div class="three col">
<div class="hamburger" id="hamburger-7">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<div class="three col">
<div class="hamburger" id="hamburger-8">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row cf">
<div class="three col">
<div class="hamburger" id="hamburger-9">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<div class="three col">
<div class="hamburger" id="hamburger-10">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<div class="three col">
<div class="hamburger" id="hamburger-11">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
<div class="three col">
<div class="hamburger" id="hamburger-12">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</div>
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
a{
text-decoration: none;
}
p, li, a{
font-size: 14px;
}
/* GRID */
.twelve { width: 100%; }
.eleven { width: 91.53%; }
.ten { width: 83.06%; }
.nine { width: 74.6%; }
.eight { width: 66.13%; }
.seven { width: 57.66%; }
.six { width: 49.2%; }
.five { width: 40.73%; }
.four { width: 32.26%; }
.three { width: 23.8%; }
.two { width: 15.33%; }
.one { width: 6.866%; }
/* COLUMNS */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-of-type {
margin-left: 0;
}
.container{
width: 100%;
max-width: 940px;
margin: 0 auto;
position: relative;
text-align: center;
}
/* CLEARFIX */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
/* ALL */
.row .three{
padding: 80px 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #2c3e50;
color: #ecf0f1;
text-align: center;
}
.hamburger .line{
width: 50px;
height: 5px;
background-color: #ecf0f1;
display: block;
margin: 8px auto;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hamburger:hover{
cursor: pointer;
}
/* ONE */
#hamburger-1.is-active .line:nth-child(2){
opacity: 0;
}
#hamburger-1.is-active .line:nth-child(1){
-webkit-transform: translateY(13px) rotate(45deg);
-ms-transform: translateY(13px) rotate(45deg);
-o-transform: translateY(13px) rotate(45deg);
transform: translateY(13px) rotate(45deg);
}
#hamburger-1.is-active .line:nth-child(3){
-webkit-transform: translateY(-13px) rotate(-45deg);
-ms-transform: translateY(-13px) rotate(-45deg);
-o-transform: translateY(-13px) rotate(-45deg);
transform: translateY(-13px) rotate(-45deg);
}
/* TWO */
#hamburger-2.is-active .line:nth-child(1){
-webkit-transform: translateY(13px);
-ms-transform: translateY(13px);
-o-transform: translateY(13px);
transform: translateY(13px);
}
#hamburger-2.is-active .line:nth-child(3){
-webkit-transform: translateY(-13px);
-ms-transform: translateY(-13px);
-o-transform: translateY(-13px);
transform: translateY(-13px);
}
/* THREE */
#hamburger-3.is-active .line:nth-child(1),
#hamburger-3.is-active .line:nth-child(3){
width: 40px;
}
#hamburger-3.is-active .line:nth-child(1){
-webkit-transform: translateX(-10px) rotate(-45deg);
-ms-transform: translateX(-10px) rotate(-45deg);
-o-transform: translateX(-10px) rotate(-45deg);
transform: translateX(-10px) rotate(-45deg);
}
#hamburger-3.is-active .line:nth-child(3){
-webkit-transform: translateX(-10px) rotate(45deg);
-ms-transform: translateX(-10px) rotate(45deg);
-o-transform: translateX(-10px) rotate(45deg);
transform: translateX(-10px) rotate(45deg);
}
/* FOUR */
#hamburger-4.is-active .line:nth-child(1),
#hamburger-4.is-active .line:nth-child(3){
width: 40px;
}
#hamburger-4.is-active .line:nth-child(1){
-webkit-transform: translateX(10px) rotate(45deg);
-ms-transform: translateX(10px) rotate(45deg);
-o-transform: translateX(10px) rotate(45deg);
transform: translateX(10px) rotate(45deg);
}
#hamburger-4.is-active .line:nth-child(3){
-webkit-transform: translateX(10px) rotate(-45deg);
-ms-transform: translateX(10px) rotate(-45deg);
-o-transform: translateX(10px) rotate(-45deg);
transform: translateX(10px) rotate(-45deg);
}
/* FIVE */
#hamburger-5.is-active{
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
#hamburger-5.is-active .line:nth-child(2){
-webkit-transition: none;
-o-transition: none;
transition: none;
}
#hamburger-5 .line:nth-child(2){
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
}
#hamburger-5.is-active .line:nth-child(2){
opacity: 0;
}
#hamburger-5.is-active .line:nth-child(1),
#hamburger-5.is-active .line:nth-child(3){
width: 35px;
-webkit-transform-origin: right;
-moz-transform-origin: right;
-ms-transform-origin: right;
-o-transform-origin: right;
transform-origin: right;
}
#hamburger-5.is-active .line:nth-child(1){
-webkit-transform: translateY(15px) rotate(45deg);
-ms-transform: translateY(15px) rotate(45deg);
-o-transform: translateY(15px) rotate(45deg);
transform: translateY(15px) rotate(45deg);
}
#hamburger-5.is-active .line:nth-child(3){
-webkit-transform: translateY(-15px) rotate(-45deg);
-ms-transform: translateY(-15px) rotate(-45deg);
-o-transform: translateY(-15px) rotate(-45deg);
transform: translateY(-15px) rotate(-45deg);
}
/* SIX */
#hamburger-6.is-active{
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#hamburger-6.is-active .line:nth-child(2){
width: 0px;
}
#hamburger-6.is-active .line:nth-child(1),
#hamburger-6.is-active .line:nth-child(3){
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
}
#hamburger-6.is-active .line:nth-child(1){
-webkit-transform: translateY(13px);
-ms-transform: translateY(13px);
-o-transform: translateY(13px);
transform: translateY(13px);
}
#hamburger-6.is-active .line:nth-child(3){
-webkit-transform: translateY(-13px) rotate(90deg);
-ms-transform: translateY(-13px) rotate(90deg);
-o-transform: translateY(-13px) rotate(90deg);
transform: translateY(-13px) rotate(90deg);
}
/* SEVEN */
#hamburger-7.is-active .line:nth-child(1){
width: 30px;
}
#hamburger-7.is-active .line:nth-child(2){
width: 40px;
}
#hamburger-7.is-active .line{
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
/* EIGHT */
#hamburger-8.is-active .line:nth-child(2){
opacity: 0;
}
#hamburger-8.is-active .line:nth-child(1){
-webkit-transform: translateY(13px);
-ms-transform: translateY(13px);
-o-transform: translateY(13px);
transform: translateY(13px);
}
#hamburger-8.is-active .line:nth-child(3){
-webkit-transform: translateY(-13px) rotate(90deg);
-ms-transform: translateY(-13px) rotate(90deg);
-o-transform: translateY(-13px) rotate(90deg);
transform: translateY(-13px) rotate(90deg);
}
/* NINE */
#hamburger-9{
position: relative;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#hamburger-9.is-active{
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#hamburger-9:before{
content: "";
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 70px;
height: 70px;
border: 5px solid transparent;
top: calc(50% - 35px);
left: calc(50% - 35px);
border-radius: 100%;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#hamburger-9.is-active:before{
border: 5px solid #ecf0f1;
}
#hamburger-9.is-active .line{
width: 35px;
}
#hamburger-9.is-active .line:nth-child(2){
opacity: 0;
}
#hamburger-9.is-active .line:nth-child(1){
-webkit-transform: translateY(13px);
-ms-transform: translateY(13px);
-o-transform: translateY(13px);
transform: translateY(13px);
}
#hamburger-9.is-active .line:nth-child(3){
-webkit-transform: translateY(-13px) rotate(90deg);
-ms-transform: translateY(-13px) rotate(90deg);
-o-transform: translateY(-13px) rotate(90deg);
transform: translateY(-13px) rotate(90deg);
}
/* TEN */
#hamburger-10{
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#hamburger-10.is-active{
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
#hamburger-10.is-active .line:nth-child(1){
width: 30px
}
#hamburger-10.is-active .line:nth-child(2){
width: 40px
}
/* ELEVEN */
#hamburger-11{
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#hamburger-11.is-active{
animation: smallbig 0.6s forwards;
}
@keyframes smallbig{
0%, 100%{
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
50%{
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
}
#hamburger-11.is-active .line:nth-child(1),
#hamburger-11.is-active .line:nth-child(2),
#hamburger-11.is-active .line:nth-child(3){
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
#hamburger-11.is-active .line:nth-child(2){
opacity: 0;
}
#hamburger-11.is-active .line:nth-child(1){
-webkit-transform: translateY(13px) rotate(45deg);
-ms-transform: translateY(13px) rotate(45deg);
-o-transform: translateY(13px) rotate(45deg);
transform: translateY(13px) rotate(45deg);
}
#hamburger-11.is-active .line:nth-child(3){
-webkit-transform: translateY(-13px) rotate(-45deg);
-ms-transform: translateY(-13px) rotate(-45deg);
-o-transform: translateY(-13px) rotate(-45deg);
transform: translateY(-13px) rotate(-45deg);
}
/* TWELVE */
#hamburger-12.is-active .line:nth-child(1){
opacity: 0;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
#hamburger-12.is-active .line:nth-child(3){
opacity: 0;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
$(document).ready(function(){
$(".hamburger").click(function(){
$(this).toggleClass("is-active");
});
});
This Pen doesn't use any external CSS resources.