호버에서 CSS 전환이 깜박임

Question

내 질문을 읽으면서 소중한 시간을 보냈습니다.

나는 공중에서 뛰어 내리는 것을 시도하고있다. 모두 괜찮 았지 만 전환하는 동안 깜박입니다. 그것은 그것이 여러 번 튀기는 것처럼 거의 보인다! 이것은 뒤집기의 모든 효과를 파괴합니다. 여기 내 코드는 바이올린 다음과

바이올린 :

그리고 CSS에 대한 FIDDLE :

.rotate { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    transition: all 0.3s; 
    padding:20px; 
    background-color: #333; 
    width: 200px; 
    text-align: center; 
    margin: 0 auto; 
    font-family: sans-serif; 
    color: #FFFFFF; 
    border-top: #E9F01D 3px solid; 
} 
.rotate:hover { 
    letter-spacing: 5px; 
    color: #E9F01D; 
    cursor: pointer; 
    -ms-transform: rotatex(360deg); 
    -webkit-transform: rotatex(360deg); 
    transform: rotatex(360deg); 
} 

가 예방 여부를이 깜박임 효과인가? 그렇다면 어떻게해야합니까?

미리 감사드립니다.

코멘트에서 언급 한 바와 같이

Answer 1

:

주요 문제는 다음과 같습니다 움직이는 (또는 애니메이션) 사업부 유혹하는 동안, 당신은 당신의 커서 아래의 요소에서 불과 않은 호버 이동 할 수 있기 때문이다.

솔루션 : 장소 당신이 가져가하면서 크기를 변경하지 않는 포함하는 요소에 마우스 오버 선택 :

Example Here.

.rotate { 
 
    width: 200px; height:80px; 
 
    background:green; 
 
} 
 

 
.rotate .rotate-inner { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
    
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
     -ms-transition: all 0.3s; 
 
      transition: all 0.3s; 
 
    
 
    padding:20px; 
 
    background-color: #333; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    font-family: sans-serif; 
 
    color: white; 
 
    border-top: #E9F01D 3px solid; 
 
} 
 

 
.rotate:hover .rotate-inner { 
 
    letter-spacing: 5px; 
 
    color: #E9F01D; 
 
    cursor: pointer; 
 
    
 
    -webkit-transform: rotatex(360deg); 
 
    -moz-transform: rotatex(360deg); 
 
     -ms-transform: rotatex(360deg); 
 
      transform: rotatex(360deg); 
 
}

<div class="rotate"> 
 
    <div class="rotate-inner">HOVER ME</div> 
 
</div>