스윙 애니메이션은 호버 위에서 시작되었지만 마우스 오버시에도 완료됩니다.

Question

그래서 컨테이너에 마우스를 올려 놓으면 내부 요소를 회전시키는 간단한 코드를 완료했습니다.

마우스가 컨테이너 위로 마우스를 가져 가면 마우스가 더 이상 컨테이너 내에 있지 않을 때와 마찬가지로 작동합니다. 스핀이 멈 춥니 다.

전체 스핀 회전을 완료하려면 어떻게해야합니까? 마우스가 컨테이너를 벗어나더라도 전체 스핀을 완료 할 마우스를 가리키면됩니다. 가능하면 CSS 만 사용하십시오.

현재 코드 :

HTML

@keyframes spin { 
 
    0% { transform: rotate(0deg); } 
 
    25% { transform: rotate(-90deg); } 
 
    50%{ transform: rotate(-180deg); } 
 
    75% { transform: rotate(-270deg); } 
 
    100% { transform: rotate(-360deg); } 
 
} 
 

 
.logo:hover > .spin{ 
 
    animation: spin 450ms; 
 
} 
 

 
.logo{ 
 
    background: #eee; 
 
    width: 100px; 
 
    height: 100px; 
 
    text-align: center; 
 
    line-height: 110px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<a href="#"> 
 
    <div class="logo"> 
 
    <i class="fa fa-globe fa-2x spin" aria-hidden="true"></i> 
 
    </div> 
 
</a>

Answer 1

이 작동합니다! :)

jQuery(document).ready(function(){ 
 
jQuery(".logo").hover(function(){ 
 
    var logo = jQuery(this); 
 
    if(!logo.hasClass('hover')){ 
 
    logo.addClass('hover'); 
 
    setTimeout(function(){ 
 
     logo.removeClass('hover'); 
 
    }, 450); 
 
    } 
 
}, function(){}); 
 
});

@keyframes spin { 
 
    0% { transform: rotate(0deg); } 
 
    25% { transform: rotate(-90deg); } 
 
    50%{ transform: rotate(-180deg); } 
 
    75% { transform: rotate(-270deg); } 
 
    100% { transform: rotate(-360deg); } 
 
} 
 

 
.logo.hover > .spin{ 
 
    animation: spin 450ms; 
 
} 
 

 
.logo{ 
 
    background: #eee; 
 
    width: 100px; 
 
    height: 100px; 
 
    text-align: center; 
 
    li

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<a href="#"> 
 
    <div class="logo"> 
 
    <i class="fa fa-globe fa-2x spin" aria-hidden="true"></i> 
 
    </div> 
 
</a>

이 작동