이 CSS 스핀 애니메이션 여기

를 반전하는 방법 내 코드입니다 :이 90 개도 다음 화살표를 회전 체류를 위해 아주 잘 작동이 CSS 스핀 애니메이션 여기

.dropdown:hover .arrow4{ 
    -webkit-animation: spin 0.3s linear; 
    -moz-animation: spin 0.3s linear; 
    -o-animation: spin 0.3s linear; 
    -ms-animation: spin 0.3s linear; 
    animation-fill-mode: forwards; 
} 
@-webkit-keyframes spin { 
    0% { -webkit-transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(90deg); } 
}

,하지만 오프 마우스를 가져 가면 다시 회전에 반대가 제자리에 끼워 질 .

출처

2016-11-01 Calum Reid

당신은 당신이 시도 무엇에 정교한시겠습니까 이미? 새로운 아이디어를 제공하는 데있어 다른 사람들을 안내하는 데 도움이되며 탐구 한 솔루션에 대한 상호 좌절을 예방할 수 있습니다. 또한 지식을 기록하므로 커뮤니티에 기여할 수 있습니다. – Digitalis

나는 코드의 "to"와 "from"라인을 사용하여 뒤집어 봤지만, 메인 메소드 인 i cam accross 인 것처럼 보이지 않았다. –

@CalumReid 내가 이해하는 바로는, 문제는 'transition'을 필요로 할 때'animation'을 사용합니다. – Ricky

당신은 기본 스타일

transform: rotate(0deg); 
transition: 0.3s;

에 다음과

transform: rotate(90deg); 
transition: 0.3s;

예 여기에 호버 상태에서 다음을 사용할 수 있습니다 https://jsfiddle.net/dt98evye/

출처

2016-11-01 22:45:32

이 효과가! 내 코드를 정리할 수있게 해 줬어! 고마워요 –

호버 상태의 'transition : 0.3s;'는 선택 사항입니다 (mouseleave에 다른 타이밍 값이 필요하지 않는 한) –

@CalumReid이 예제에서는'hover' 상태에서'transition'을 사용할 필요가 없습니다. 어쩌면 [** this **] (http://stackoverflow.com/a/38226571/4305494) 일이 더 명확 해집니다. – Ricky

animation-fill-mode를 사용하십시오. 모두;

두 방향으로 애니메이션을 실행합니다.

출처

2016-11-01 22:38:50 Ozoid

나는 그것을 줬다. 그리고 슬프게도 일을하지 않았다) : –

나는 마우스를 가져 가면 호버 명령으로 작동하지 않는다고 생각한다. 반면 마우스를 놓은 경우를 처리하는 방법을 찾고있는 반면 요소. 호버없이 별도의 선택기를 만들고 거기에 Ozoid의 제안을 사용하십시오. – Digitalis

도움을 주셔서 감사합니다, 그것은 unnappreciated되지 않습니다, marks_c의 대답은 나를 위해 잘 작동 –

이 CSS 스핀 애니메이션 여기

답변

관련 문제