호버시 연속 CSS 회전 애니메이션, 호버 아웃시 0deg로 다시 애니메이션

호버시 연속 CSS 회전 애니메이션, 호버 아웃시 0deg로 다시 애니메이션

---

무기한으로 마우스를 가져 가면 회전하는 요소가 있습니다. 마우스 오버하면 애니메이션이 중지됩니다. 단순한:

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to { 
        -webkit-transform: rotate(360deg);
    }
}

.elem:hover {
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

하지만 마우스 오버하면 애니메이션이 갑자기 멈추고 0 도로 돌아갑니다. 해당 위치로 다시 애니메이션을 적용하고 싶지만 구문 작업에 문제가 있습니다.

모든 입력은 굉장 할 것입니다!

---

해결책은 .elem에 기본값을 설정하는 것입니다. 그러나이 애니메이션은 -moz에서는 잘 작동하지만 아직 -webkit에서는 구현되지 않습니다.

내가 당신의 것에서 업데이트 한 바이올린을보십시오 : http://jsfiddle.net/DoubleYo/4Vz63/1648/

Firefox에서는 잘 작동하지만 Chrome에서는 작동하지 않습니다.

.elem{
    position: absolute;
    top: 40px;
    left: 40px;
    width: 0; 
    height: 0;
    border-style: solid;
    border-width: 75px;
    border-color: red blue green orange;
    transition-property: transform;
    transition-duration: 1s;
}
.elem:hover {
    animation-name: rotate; 
    animation-duration: 2s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

<div class="elem"></div>

---

다음은 간단한 작업 솔루션입니다.

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.elem:hover {
    -webkit-animation:spin 1.5s linear infinite;
    -moz-animation:spin 1.5s linear infinite;
    animation:spin 1.5s linear infinite;
}

---

몇 번의 시도가 필요했지만 jsFiddle이 작동하도록 할 수있었습니다 (Webkit 전용).

사용자가 div에 다시 들어갈 때 애니메이션 속도에 여전히 문제가 있습니다.

기본적으로 현재 회전 값을 변수로 설정 한 다음 해당 값에 대해 몇 가지 계산을 수행 한 다음 (각도로 변환) 마우스 이동 및 마우스 입력시 해당 값을 다시 요소로 설정합니다.

jsFiddle을 확인하세요 : http://jsfiddle.net/4Vz63/46/

브라우저 간 호환성을 추가하는 방법을 포함한 자세한 내용은 http://css-tricks.com/get-value-of-css-rotation-through-javascript/를 참조하십시오.

---

크로스 브라우저 호환 JS 솔루션 :

var e = document.getElementById('elem');
var spin = false;

var spinner = function(){
e.classList.toggle('running', spin);
if (spin) setTimeout(spinner, 2000);
}

e.onmouseover = function(){
spin = true;
spinner();
};

e.onmouseout = function(){
spin = false;
};

body { 
height:300px; 
}
#elem {
position:absolute;
top:20%;
left:20%;
width:0; 
height:0;
border-style: solid;
border-width: 75px;
border-color: red blue green orange;
border-radius: 75px;
}

#elem.running {
animation: spin 2s linear 0s infinite;
}

@keyframes spin { 
100% { transform: rotate(360deg); } 
}

<div id="elem"></div>

---

다음은 웹킷과 함께 작동하는 자바 스크립트 구현입니다.

var isHovering = false;

var el = $(".elem").mouseover(function(){
    isHovering = true;
    spin();
}).mouseout(function(){
    isHovering = false;
});

var spin = function(){
    if(isHovering){
        el.removeClass("spin");

        setTimeout(function(){
            el.addClass("spin");

            setTimeout(spin, 1500);
        }, 0);
    }
};
spin();

JSFiddle : http://jsfiddle.net/4Vz63/161/

Barf.

---

<script>
var deg = 0

function rotate(id)
{
    deg = deg+45;
    var txt = 'rotate('+deg+'deg)';
    $('#'+id).css('-webkit-transform',txt);
}
</script>

What I do is something very easy... declare a global variable at the start... and then increment the variable however much I like, and use .css of jquery to increment.

---

You should trigger the animation to revert once it's completed w/ javascript.

  $(".item").live("animationend webkitAnimationEnd", function(){
    $(this).removeClass('animate');
  });

ReferenceURL : https://stackoverflow.com/questions/7988962/continuous-css-rotation-animation-on-hover-animated-back-to-0deg-on-hover-out