Question

当mousehover在元素中时我需要动画，但是当用户制作mouseout元素时，动画在本地电流中停止。

＆＃13;

        countRotate = 0;
        adiciona = true;
        $('.circulo-left').mouseenter(function(){
            $('#circuloprincipalcomabaazulclaro').css('transform', 'rotate('+countRotate+'deg)');
            if(adiciona == true){
                countRotate++;
                if(countRotate == 360){
                    adiciona = false;
                }
            }else{
                countRotate = countRotate - 1;
                 if(countRotate == 0){
                    adiciona = true;
                }
            }
        });
        // I thought of something like that.

＆＃13;

.circle{
      width:200px;
      height:200px;
      border-radius:50%;
      border
    }
    .circle:hover{
        #circuloprincipalcomabaazulclaro{
            @include animation(rotate 3s infinite alternate);
        }
    }
    @keyframes rotate {
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(360deg);
        }
    }
    /* But when I remove the mouse it returns to the starting point. */

＆＃13;

<div class="circle"></div>

＆＃13;

Answer 1

更新：添加了一些JS以获得所需的输出。

你不需要jquery或js来获得这种效果。这是你需要做的。

稍微修改了您的代码。

const circle = document.querySelector('.circle');

circle.onmouseover = function(){
  this.style.animation = 'rotate 1.5s infinite linear';  
  this.style.webkitAnimationPlayState="running";
}

circle.onmouseout = function(){
    this.style.webkitAnimationPlayState="paused";
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: red;
  position: relative;
  cursor: pointer;
}

span {
  width: 5px;
  height: 30px;
  background: #fff;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -5px;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<div class="circle"><span></span></div>

Answer 2

我建立在@hunzaboy的答案之上，OP表示他希望动画保持它的状态，所以我做了一些调整，也使旋转变为线性。

如果您离开它999999999秒（约277小时），旋转将停留

.circle{
      width:200px;
      height:200px;
      border-radius:50%;
      background: red;
      position: relative;
      transition-property: transform;
      transition-duration: 2s;
      transition-delay: 999999999s;
      transition-timing-function: linear;
    }
span{
  width: 10px;
  height: 40px;
  background: #fff;
  position: absolute;
  top: 0;
  left: 50%;
  }
    .circle:hover{
       transform: rotate(360deg);
       transition-delay: 0s;
    }
    /* But when I remove the mouse it returns to the starting point. */

<div class="circle"><span></span></div>

鼠标悬停时循环在元素JS或Jquery中

2 个答案: