Question

我对这件事感到迷惑。我不知道如何用按钮开始动画。我是动画的新手，因此，如果您可以将其简化，对我来说更容易理解！我不太了解jquery！我一直在找几个小时，但找不到我想要的东西，或者太难理解了！谢谢！

<!DOCTYPE html>
<html>
<head></head>
<title>The Wheel!</title>
<body bgcolor="orange">
<head>
    <style>
        .wheel {
            width: 200px;
            height: 100px;
            left: 600px;
            top: 300px;
            background: green;
            position: relative;
            -webkit-animation: myfirst 4s 2;
            -webkit-animation-direction: alternate;
            animation: myfirst 4s 2;
            animation-direction: alternate;
        }

        @-webkit-keyframes myfirst {
            0% {background: green; left: 600px; top: 300px;}
            33% {background: green; left: 600px; top: 0px;}
            66% {background: green; left: 600px; top: 650px;}
            100% {background: green; left: 600px; top: 0px;}
        }

        @keyframes myfirst {
            0% {background: green; left: 600px; top: 300px;}
            33% {background: green; left: 600px; top: 300px;}
            66% {background: green; left: 600px; top: 0px;}
            100% {background: green; left: 600px; top: 650px;}
        }
    </style>      
</head>
    <div class="wheel"></div>
    <button onclick="startbtn">Start</button>

<script>
startbtn = ???;
</script>


</body>
</html>

Answer 1

您可以使用另一个类，然后在单击按钮时，将其与类wheel一起使用，然后向其中添加新类：

startbtn = function() {
  $('.wheel').addClass('animated-wheel');
}

.wheel {
  width: 200px;
  height: 100px;
  left: 600px;
  top: 300px;
  background: green;
  position: relative;
}

.animated-wheel {
  -webkit-animation: myfirst 4s 2;
  -webkit-animation-direction: alternate;
  animation: myfirst 4s 2;
  animation-direction: alternate;
}

@-webkit-keyframes myfirst {
  0% {
    background: green;
    left: 600px;
    top: 300px;
  }
  33% {
    background: green;
    left: 600px;
    top: 0px;
  }
  66% {
    background: green;
    left: 600px;
    top: 650px;
  }
  100% {
    background: green;
    left: 600px;
    top: 0px;
  }
}

@keyframes myfirst {
  0% {
    background: green;
    left: 600px;
    top: 300px;
  }
  33% {
    background: green;
    left: 600px;
    top: 300px;
  }
  66% {
    background: green;
    left: 600px;
    top: 0px;
  }
  100% {
    background: green;
    left: 600px;
    top: 650px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>The Wheel!</title>
</head>

<body bgcolor="orange">
  <div class="wheel"></div>
  <button onclick="startbtn()">Start</button>
</body>

</html>

要无限次使用，请使用此：

.animated-wheel {
  -webkit-animation: myfirst 4s infinite; /* infinite can be changed to a number, like 4 or 6 */
  -webkit-animation-direction: alternate;
  animation: myfirst 4s infinite; /* infinite can be changed to a number, like 4 or 6 */
  animation-direction: alternate;
}

Answer 2

您可以使用jquery这样将class转换为div的类切换到div。

您需要第一个jquery。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

然后删除“动画：myfirst 4s 2;”。在你班上

例如创建一个新类

.start { animation: myfirst 4s 2;}

现在您将.start切换到div框

<script>
startbtn(){
$( ".wheel" ).toggleClass( "start" );
 };
</script>

Answer 3

使用本地javascript是一种方法。

wheel.animate(
 [
   {background: 'green', left: '100px', top: '30px'},
   {background: 'green', left: '120px', top: '40px'},
   {background: 'green', left: '160px', top: '100px'},
   {background: 'green', left: '100px', top: '30px'}
 ], {
   duration: 3000,
   iterations: Infinity
 }
)

.wheel {
    width: 170px;
    height: 100px
    left: 100px;
    top: 100px;
    background: green;
    color: white;
    position: relative;
    padding: 1rem
 }

<div class="wheel" id="wheel">Native js animation</div>

The web animation api

如何使用按钮开始动画？

3 个答案: