12 hamburger icon animations
A Pen by Stan Williams on CodePen.
12 hamburger icon animations
A Pen by Stan Williams on CodePen.
<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> |
$(document).ready(function(){ | |
$(".hamburger").click(function(){ | |
$(this).toggleClass("is-active"); | |
}); | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
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%); | |
} |