HTML CSS examples for CSS Widget:Hover Animation
CSS3 hovering out transition effect
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .trn {<!--from www. j a v a 2 s . c om--> -webkit-transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; transition:all .4s ease-in-out; } .hamburger-wrap { width:31px; height:31px; position:relative; margin-left:auto; margin-right:auto; } .hamburger-wrap span { height:6px; width:31px; display:block; background-color:Chartreuse; position:absolute; } .hamburger-wrap span:first-of-type { top:0; transition-property:top, transform; transition-duration:.4s, .4s; transition-delay:0s, .2s; } .hamburger-wrap span:nth-child(2) { top:13px; right:0; transition-property:right, opacity; transition-duration:.4s, .4s; transition-delay:.3s, .4s; } .hamburger-wrap span:last-of-type { bottom:0; transition-property:bottom, transform; transition-duration:.4s, .4s; transition-delay:.5s, .6s; } .hamburger-wrap:hover span:first-of-type { top:13px; -ms-transform:rotate(46deg); -webkit-transform:rotate(46deg); transform:rotate(46deg); } .hamburger-wrap:hover span:nth-child(2) { opacity:0; right:-26px; } .hamburger-wrap:hover span:last-of-type { bottom:14px; -ms-transform:rotate(-46deg); -webkit-transform:rotate(-46deg); transform:rotate(-46deg); } </style> </head> <body> <div class="hamburger-wrap"> <span class="trn"></span> <span class="trn"></span> <span class="trn"></span> </div> </body> </html>