CSS 애니메이션 효과를 유지하는 방법은 무엇입니까?

Question

CSS에서 슬라이드 애니메이션이 있습니다. 이 효과를 유지할 수있는 기회가 있습니까?

#arch{ 
    margin-top:5%; 
    width:222px; 
    height:222px; 
    background-image:url(img/arch.jpg); 
    box-shadow:0px 0px 3px #000000; 

    } 

#arch:hover{ 
     -webkit-animation:przesuniecie 1s 1 alternate; 
     } 

@-webkit-keyframes przesuniecie 
{ 
from {width:222px;} 
to {width:0px;} 
} 

Answer 1

마우스를 가져 가면 요소를 슬라이드하여 멀리 가져야한다는 것을 의미하고 마우스가 떠날 때 미끄러지는 것을 의미합니까? 부모 요소에 가져가 : 나는 퍼팅 제안

*:hover > #arch{ 
    -webkit-animation:przesuniecie 1s 1 alternate; 
} 

@-webkit-keyframes przesuniecie 
{ 
    from {width:222px;} 
    to {width:0px;} 
} 

는 부모 요소가 무엇인지에 따라, 당신은 <div>에 #arch 요소를 포장해야 할 수도 있습니다.

또한, 애니메이션이 갑자기로 마우스 끝나지 않도록, 대신 CSS 애니메이션의 CSS 전환을 사용해야 할 수도 있습니다 :

#arch{ 
    -webkit-transition:width 1s; 
    width: 220px; 
} 

*:hover > #arch{ 
    width: 0; 
} 

(속성의 다른 변화를 포함하는 것을 잊지 마세요 다른 브라우저의 경우)

Answer 2

이벤트를 제거하고 그대로 두십시오.