css-animated-hamburger-icon.html

<style>
/* https://github.com/AlbertoSono
css-animate-hamburger-icon
https://github.com/AlbertoSono/css-animate-hamburger-icon
*/
.burger{ display: inline-block; border: 0; outline: 0; padding: 0; cursor: pointer; border-bottom: 4px solid currentColor; width: 28px; transition: border-bottom 1s ease-in-out; -webkit-transition: border-bottom 1s ease-in-out; border-radius: 20%;}
.burger::-moz-focus-inner{ border: 0; padding: 0;}
.burger:before, .burger:after{ content: ""; display: block; border-bottom: 4px solid currentColor; width: 100%; margin-bottom: 5px; transition: transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out; border-radius: 30%;}
.burger-check{ display: none;}
.burger-check:checked ~ .burger{ border-bottom: 4px solid transparent; transition: border-bottom 0.8s ease-in-out; -webkit-transition: border-bottom 0.8s ease-in-out;}
.burger-check:checked ~ .burger:before, .burger-check:checked ~ .burger:after{ transition: transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out;}
.burger-check:checked ~ .burger:before{ -ms-transform: rotate(-405deg) translateY(6px) translateX(-6px); transform: rotate(-405deg) translateY(6px) translateX(-6px); -webkit-transform: rotate(-405deg) translateY(6px) translateX(-6px);}
.burger-check:checked ~ .burger:after{ -ms-transform: rotate(405deg) translateY(0) translateX(0); transform: rotate(405deg) translateY(0) translateX(0); -webkit-transform: rotate(405deg) translateY(0) translateX(0);}
.burger-check:checked ~ .navigation{ max-height: 500px; -webkit-transition: max-height 0.5s ease-in-out; transition: max-height 0.5s ease-in-out;}
</style>
<input class="burger-check" id="burger-check" type="checkbox"><label for="burger-check" class="burger"></label>