마무리 후 CSS3 애니메이션을 유지하는 방법, 마우스가 사라진 후 되돌리기

Question

CSS3 애니메이션/변형에 관한 질문이 있습니다. 일반적으로, 나는 CSS3 주위에 항상 자신의 길을 찾을 수 있습니다 - 너무 간단하기 때문에,이 하나는 저를 곤경에 빠지게했습니다.

내가 가진 것은 더하기 기호 사진입니다. 사용자가 더하기 기호 위로 마우스를 가져 가면 360도 회전하여 그림이 빼기 기호로 바뀝니다. 애니메이션이 끝날 때를 제외하고 모든 것이 잘 작동합니다. 플러스 기호로 빠르게 되돌아갑니다. 마우스가 움직일 때까지 빼기 기호에 머물러 있기를 원하면 플러스 기호로 돌아갈 수 있습니다.

#lock-screen #time-section .unlock { 
    cursor: pointer; 
    display: block; 
    height: 22px; 
    width: 23px; 
    background-image: url('../images/metro_icon_pack/plus.png'); 
    background-repeat: no-repeat; 
    margin-left: -15px; 
    margin-top: 5px; 
} 

#lock-screen #time-section .unlock:hover { 
    animation: rotate 1s; 
    -o-animation: rotate 1s; 
    -ms-animation: rotate 1s; 
    -moz-animation: rotate 1s; 
    -webkit-animation: rotate 1s; 
} 

@-webkit-keyframes rotate { 
    0% { 
     -webkit-transform: rotate(0deg); 
    } 

    100% { 
     -webkit-transform: rotate(360deg); 
     background-image: url('../images/metro_icon_pack/minus.png'); 
    } 
} 

지금, 나는 단지 웹킷 기반 브라우저 (크롬과 사파리)에 대한 코드를 제공하고 실현 :

여기 내 코드입니다. Chrome에서 테스트 중이므로 나중에 다른 브라우저에 대한 지원을 추가 할 예정입니다.

도움을 주셔서 감사합니다.

Answer 1

나는 마이너스 배경 이미지를 #lock-screen #time-section .unlock:hover 아래에두고 단 1 초의 배경 이미지 전환을 추가하기 만하면됩니다.

또한, 오히려 0 %, 당신은 단지에에서 사용할 수있는 100 % ...

처럼 사용하는 것보다 :

#lock-screen #time-section .unlock:hover { 
background-image: url('../images/metro_icon_pack/minus.png'); 
-webkit-transition: background-image 1s; 
/* Other -vendor-transitions go here */ 
} 

Demo합니다. 나는 또한 변환 방식이 아닌 애니메이션으로 가서 단지 (당신은 또한 다시 더하기 기호 요소를 회전 할 수 있습니다) 전환을 사용

...
Demo.

요소를 다시 + 기호로 회전하지 않으려면 -webkit-transition을 호버 상태에 추가하기 만하면됩니다.

Demo.