CSS3 schwebt Übergangseffekt

Question

Hallo Leute ich habe eine harte Zeit konfigurieren, was ist der fehlende Teil meiner CSS, weil die Animation in Hover-Out ist nicht das gleiche in Hover in, hier ist die Geige Link Danke.

[https://jsfiddle.net/m2Lz4euv/][1] 

Answer 1

Sie müssen die Timing-Eigenschaften in den Nicht-Hover-Selektoren anwenden.

jsFiddle

Was ich getan habe, ändert sich dies:

.hamburger-wrap span:first-of-type { 
    top: 0; 
} 

.hamburger-wrap:hover span:first-of-type{ 
    top: 12px; 
    -ms-transform: rotate(45deg); /* IE 9 */ 
    -webkit-transform: rotate(45deg); /* Safari */ 
    transform: rotate(45deg); 
    transition-property: top, transform; 
    transition-duration: .3s, .3s; 
    transition-delay: 0s, .1s; 
} 

Um dies:

.hamburger-wrap span:first-of-type { 
    top: 0; 
    transition-property: top, transform; 
    transition-duration: .3s, .3s; 
    transition-delay: 0s, .1s; 
} 

.hamburger-wrap:hover span:first-of-type{ 
    top: 12px; 
    -ms-transform: rotate(45deg); /* IE 9 */ 
    -webkit-transform: rotate(45deg); /* Safari */ 
    transform: rotate(45deg); 
} 

Wenn Sie die verschiedenen Timing für wollen In- und Out-Zustand können Sie einstellen, das In-Timing im: Hover-Selektor und das Out-Timing im normalen Selektor.

Answer 2

HOVER FIDDLE DEMO

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
/* Icon 1 */ 
 

 
#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 { 
 
    width: 60px; 
 
    height: 45px; 
 
    position: relative; 
 
    margin: 50px auto; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    -webkit-transition: .5s ease-in-out; 
 
    -moz-transition: .5s ease-in-out; 
 
    -o-transition: .5s ease-in-out; 
 
    transition: .5s ease-in-out; 
 
    cursor: pointer; 
 
} 
 

 
#nav-icon1 span, #nav-icon3 span, #nav-icon4 span { 
 
    display: block; 
 
    position: absolute; 
 
    height: 9px; 
 
    width: 100%; 
 
    background: #d3531a; 
 
    border-radius: 9px; 
 
    opacity: 1; 
 
    left: 0; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    -webkit-transition: .25s ease-in-out; 
 
    -moz-transition: .25s ease-in-out; 
 
    -o-transition: .25s ease-in-out; 
 
    transition: .25s ease-in-out; 
 
} 
 

 
#nav-icon1 span:nth-child(1) { 
 
    top: 0px; 
 
} 
 

 
#nav-icon1 span:nth-child(2) { 
 
    top: 18px; 
 
} 
 

 
#nav-icon1 span:nth-child(3) { 
 
    top: 36px; 
 
} 
 

 
#nav-icon1:hover span:nth-child(1) { 
 
    top: 18px; 
 
    -webkit-transform: rotate(135deg); 
 
    -moz-transform: rotate(135deg); 
 
    -o-transform: rotate(135deg); 
 
    transform: rotate(135deg); 
 
} 
 

 
#nav-icon1:hover span:nth-child(2) { 
 
    opacity: 0; 
 
    left: -60px; 
 
} 
 

 
#nav-icon1:hover span:nth-child(3) { 
 
    top: 18px; 
 
    -webkit-transform: rotate(-135deg); 
 
    -moz-transform: rotate(-135deg); 
 
    -o-transform: rotate(-135deg); 
 
    transform: rotate(-135deg); 
 
} 
 

 

 
/* Icon 3 */ 
 

 
#nav-icon3 span:nth-child(1) { 
 
    top: 0px; 
 
} 
 

 
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) { 
 
    top: 18px; 
 
} 
 

 
#nav-icon3 span:nth-child(4) { 
 
    top: 36px; 
 
} 
 

 
#nav-icon3:hover span:nth-child(1) { 
 
    top: 18px; 
 
    width: 0%; 
 
    left: 50%; 
 
} 
 

 
#nav-icon3:hover span:nth-child(2) { 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 

 
#nav-icon3:hover span:nth-child(3) { 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
} 
 

 
#nav-icon3:hover span:nth-child(4) { 
 
    top: 18px; 
 
    width: 0%; 
 
    left: 50%; 
 
} 
 

 
/* Icon 4 */ 
 

 
#nav-icon4 { 
 
} 
 

 
#nav-icon4 span:nth-child(1) { 
 
    top: 0px; 
 
    -webkit-transform-origin: left center; 
 
    -moz-transform-origin: left center; 
 
    -o-transform-origin: left center; 
 
    transform-origin: left center; 
 
} 
 

 
#nav-icon4 span:nth-child(2) { 
 
    top: 18px; 
 
    -webkit-transform-origin: left center; 
 
    -moz-transform-origin: left center; 
 
    -o-transform-origin: left center; 
 
    transform-origin: left center; 
 
} 
 

 
#nav-icon4 span:nth-child(3) { 
 
    top: 36px; 
 
    -webkit-transform-origin: left center; 
 
    -moz-transform-origin: left center; 
 
    -o-transform-origin: left center; 
 
    transform-origin: left center; 
 
} 
 

 
#nav-icon4:hover span:nth-child(1) { 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    top: -3px; 
 
    left: 8px; 
 
} 
 

 
#nav-icon4:hover span:nth-child(2) { 
 
    width: 0%; 
 
    opacity: 0; 
 
} 
 

 
#nav-icon4:hover span:nth-child(3) { 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
    top: 39px; 
 
    left: 8px; 
 
}

<div id="nav-icon1"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
</div> 
 

 
<div id="nav-icon3"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
</div> 
 
<div id="nav-icon4"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
</div>