Snippets

Pure CSS Menu Icon Transitions

Animate your menu hamburger icon with a few lines of CSS.

July 3, 2017

menu icon animation

Pure CSS Menu Icon Transitions
<div class="spinner-master"> <input type="checkbox" id="spinner-form" /> <label for="spinner-form" class="spinner-spin"> <div class="spinner diagonal part-1"></div> <div class="spinner horizontal"></div> <div class="spinner diagonal part-2"></div> </label> </div> <div class="spinner-master2"> <input type="checkbox" id="spinner-form2" /> <label for="spinner-form2" class="spinner-spin2"> <div class="spinner2 diagonal part-1"></div> <div class="spinner2 horizontal"></div> <div class="spinner2 diagonal part-2"></div> </label> </div> <div class="spinner-master3"> <input type="checkbox" id="spinner-form3" /> <label for="spinner-form3" class="spinner-spin3"> <div class="spinner3 diagonal part-1"></div> <div class="spinner3 horizontal"></div> <div class="spinner3 diagonal part-2"></div> </label> </div> /* #1 VERSION*/ .spinner-master * {transition:all 0.3s;-webkit-transition:all 0.3s;box-sizing:border-box;} .spinner-master {position:relative;margin:50px auto;height:50px;width:50px;} .spinner-master input[type=checkbox] {display:none;} .spinner-master label {cursor:pointer;position:absolute;z-index:99;height:100%;width:100%;top:10px;left:0;} .spinner-master .spinner {position:absolute;height:5px;width:100%;background-color:#000;} .spinner-master .diagonal.part-1 {position:relative;float:left;} .spinner-master .horizontal {position:relative;float:left;margin-top:6px;} .spinner-master .diagonal.part-2 {position:relative;float:left;margin-top:6px;} .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal {opacity: 0;} .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 {transform:rotate(405deg);-webkit-transform:rotate(405deg);margin-top:10px;} .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 {transform:rotate(-405deg);-webkit-transform:rotate(-405deg);margin-top:-16px;} /* #2 VERSION*/ .spinner-master2 * {transition:all 0.3s;-webkit-transition:all 0.3s;box-sizing:border-box;} .spinner-master2 {position:relative;margin:50px auto;height:50px;width:50px;} .spinner-master2 input[type=checkbox] {display:none;} .spinner-master2 label {cursor:pointer;position:absolute;z-index:99;height:100%;width:100%;top:10px;left:0;} .spinner-master2 .spinner2 {position:absolute;height:5px;width:100%;background-color:#000;} .spinner-master2 .diagonal.part-1 {position:relative;float:left;} .spinner-master2 .horizontal {position:relative;float:left;margin-top:7px;} .spinner-master2 .diagonal.part-2 {position:relative;float:left;margin-top:6px;} .spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .horizontal {opacity: 0;} .spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .diagonal.part-1 {transform:rotate(135deg);-webkit-transform:rotate(135deg);margin-top:10px;} .spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .diagonal.part-2 {transform:rotate(-135deg);-webkit-transform:rotate(-135deg);margin-top:-16px;} /* #3 VERSION*/ .spinner-master3 * {transition:all 0.3s;-webkit-transition:all 0.3s;box-sizing:border-box;} .spinner-master3 {position:relative;margin:50px auto;height:50px;width:50px;} .spinner-master3 input[type=checkbox] {display:none;} .spinner-master3 label {cursor:pointer;position:absolute;z-index:99;height:100%;width:100%;top:10px;left:0;} .spinner-master3 .spinner3 {position:absolute;height:5px;width:100%;background-color:#000;} .spinner-master3 .diagonal.part-1 {position:relative;float:left;} .spinner-master3 .horizontal {position:relative;float:left;margin-top:6px;} .spinner-master3 .diagonal.part-2 {position:relative;float:left;margin-top:6px;} .spinner-master3 input[type=checkbox]:checked ~ .spinner-spin3 > .horizontal {transform:scale(2,1);-webkit-transform:scale(2,1); opacity: 0;} .spinner-master3 input[type=checkbox]:checked ~ .spinner-spin3 > .diagonal.part-1 {transform:rotate(-135deg);-webkit-transform:rotate(-135deg);margin-top:10px;} .spinner-master3 input[type=checkbox]:checked ~ .spinner-spin3 > .diagonal.part-2 {transform:rotate(135deg);-webkit-transform:rotate(135deg);margin-top:-16px;}

Related Content

Easy Way to Fix Anchor Links Scrolling Too Far

Stories

Easy Way to Fix Anchor Links Scrolling Too Far

Fixed navbar is a very popular way of displaying navigation when a page is scrolled, but you could run into a small detail that needs to be addressed.

How to Avoid Page Flickering When Scrollbars are Dynamically Shown or Hidden?

Stories

How to Avoid Page Flickering When Scrollbars are Dynamically Shown or Hidden?

There are certain cases when you want to dynamically manipulate the page height which will result in flickering.

Changing the Mouse Cursor in CSS With the cursor Property

Stories

Changing the Mouse Cursor in CSS With the cursor Property

Using CSS to change the cursor on your website is a great way to add a little bit of personality to your site.