Created
April 19, 2022 19:04
-
-
Save iamhtmldeveloper/a3dd3736fb63caf4ca9d12e7f2aacf54 to your computer and use it in GitHub Desktop.
Revisions
-
iamhtmldeveloper created this gist
Apr 19, 2022 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,7 @@ Hamburger Icon Animations ------------------------- 12 hamburger icon animations A [Pen](https://codepen.io/RRoberts/pen/ZBYaJr) by [Rosa](https://codepen.io/RRoberts) on [CodePen](https://codepen.io). [License](https://codepen.io/license/pen/ZBYaJr). This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,93 @@ <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> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,5 @@ $(document).ready(function(){ $(".hamburger").click(function(){ $(this).toggleClass("is-active"); }); }); This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1 @@ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,452 @@ 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%); }