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

启动动画：

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

停止动画：

获取元素的当前旋转。改编自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;
}

获取当前角度，然后通过删除类来停止当前动画：

$(".stop").on("click", function() {

  //Get the current rotation value
  angle1 = getRotationDegrees($('.rotate'));

  //Stop current animation
  $('div').removeClass('play rotate');

创建新的停止动画：它看起来有点乱。基本上，它正在创建一个以当前旋转为起点的新动画。然后动画将其带回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);

重新启动动画：

$(".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);

完整示例

＆＃13;

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');
});

＆＃13;

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);
  }
}

＆＃13;

<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>

＆＃13;

返回CSS动画起始位置

1 个答案:

无限动画

jQuery

完整示例