css - 返回 CSS 动画起始位置

Question

我想完成动画并顺利返回到原来的状态，但是有一个跳跃。

所需条件，动画的持续时间可以是任意值。

我尝试使用 CSS 功能来做到这一点。

setTimeout(function() {
    $('div').addClass('stop');
}, 2500);

div {
    width: 50px;
    height: 300px;
    margin: 50px 150px;
    background-color: green;
    -webkit-animation: wiggle 2s linear infinite;
            animation: wiggle 2s linear infinite;
}
.stop {
    -webkit-animation: none;
            animation: none;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>

Answer 1

我创建了一个旋转回到开头的停止和开始动画。它通过按钮启动和停止，并且可以轻松加载启动。这个答案的底部有一个完整的演示:)

div 看起来像这样:

<div class="rotate"></div>

无限动画

.play {
  -webkit-animation: wiggle 2s linear infinite;
  animation: wiggle 2s linear infinite;
}

jQuery

1. 开始动画:

   $(".start").on("click", function() {            
     //Add infinite rotation animation classes
     $('div').addClass('play rotate');
   });
   

2. 停止动画:

   获取元素的当前旋转。改编自this answer here通过 @twist

   function getRotationDegrees(obj) {
     var matrix = obj.css("-webkit-transform") ||
       obj.css("-moz-transform") ||
       obj.css("-ms-transform") ||
       obj.css("-o-transform") ||
       obj.css("transform");
     if (matrix !== 'none') {
       var values = matrix.split('(')[1].split(')')[0].split(',');
       var a = values[0];
       var b = values[1];
       var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
     } else {
       var angle = 0;
     }
     return (angle < 0) ? angle += 360 : angle;
   }
   

   获取当前 Angular ，然后通过删除类来停止当前动画:

   $(".stop").on("click", function() {
   
     //Get the current rotation value
     angle1 = getRotationDegrees($('.rotate'));
   
     //Stop current animation
     $('div').removeClass('play rotate');
   

3. 创建新的停止动画:看起来有点乱。基本上，它正在以当前旋转为起点创建一个新动画。然后动画将其返回到 0deg .

   //Create stop animation and apply to new class "rotated"
     var animation = '<style type="text/css" title="stopAnimation">.rotated { -webkit-animation: stop 2s forwards; animation: stop 2s forwards; }  @-webkit-keyframes stop {  0% { transform: rotate(' + angle1 + 'deg);} 100% { transform: rotate(-0deg); } } @keyframes stop {  0% { transform: rotate(' + angle1 + 'deg);} 100% { transform: rotate(-0deg); } }</style>';          
   
     //Append new styles to the header
     $('head').append(animation);
   

4. 重新启动动画:

   $(".start").on("click", function() {
   
     //Remove stopping animation class
     $('div').removeClass('rotated');
   
     //Add infinite rotation animation classes
     $('div').addClass('play rotate');
   });
   

添加了<style>动画完成后标签被删除:

  //Garbage man - Remove the style tags after the animation is done
  // Important - The timeout should match the duration of the stop animation.      
  setTimeout(
  function() 
  {   
    $('style[title="stopAnimation"]').remove();    

  }, 2000);

完整示例

function getRotationDegrees(obj) {
  var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform") ||
    obj.css("-ms-transform") ||
    obj.css("-o-transform") ||
    obj.css("transform");
  if (matrix !== 'none') {
    var values = matrix.split('(')[1].split(')')[0].split(',');
    var a = values[0];
    var b = values[1];
    var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
  } else {
    var angle = 0;
  }
  return (angle < 0) ? angle += 360 : angle;
}


$(".stop").on("click", function() {
  
  //Get the current rotation value
  angle1 = getRotationDegrees($('.rotate'));
  
  //Stop current animation
  $('div').removeClass('play rotate');
  
  //Add class "rotated" for new animation
  $('div').addClass('rotated');


  //Create stop animation and apply to new class "rotated"
  var animation = '<style type="text/css" title="stopAnimation">.rotated { -webkit-animation: stop 2s linear forwards; animation: stop 2s linear forwards; }  @-webkit-keyframes stop {  0% { transform: rotate(' + angle1 + 'deg);} 100% { transform: rotate(-0deg); } } @keyframes stop {  0% { transform: rotate(' + angle1 + 'deg);} 100% { transform: rotate(-0deg); } }</style>';
  
  
  //Append new styles to the header
  $('head').append(animation);
  
  //Garbage man - Remove the style tags after the animation is done
  // Important - The timeout should match the duration of the stop animation.  
  setTimeout(
  function() 
  {   
    $('style[title="stopAnimation"]').remove();    

  }, 2000);
  
  


});

$(".start").on("click", function() {
  
  //Remove stopping animation class
  $('div').removeClass('rotated');
  
  //Add infinite rotation animation classes
  $('div').addClass('play rotate');
});

div {
  width: 50px;
  height: 300px;
  margin: 50px 150px;
  background-color: green;
}
.play {
  -webkit-animation: wiggle 2s linear infinite;
  animation: wiggle 2s linear infinite;
}
@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes wiggle {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="stop">Stop!</button>
<button class="start">Start!</button>

<div class="rotate"></div>