javascript - JS :Want to animate on clicking the button

Question

我想在单击“动画”按钮时为 div 设置动画/着色你能测试我的代码并提出一些更改建议或添加一些代码吗？

我的代码是这样的:-

.anime {
  animation: coloranimate 5s;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: red;
}

@keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

@-webkit-keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anime" class="anime">
</div>
<button>Animate</button>

我想使用动画按钮为 div 设置动画/着色。

Answer 1

您可以在点击按钮时使用.addClass()，一旦您添加了包含动画属性的类，动画就会自动开始。

---

查看代码片段:

$('button').click(function() {
  $('#anime').addClass("anime");
});

#anime {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: red;
}

.anime {
  animation: coloranimate 5s;
}

@keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

@-webkit-keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anime">
</div>
<button>Animate</button>