点击按钮实现div移动动画

要实现点击按钮实现div移动动画，可以使用JavaScript和CSS来实现。下面是一种实现方式：

1. 首先，在HTML中创建一个按钮和一个需要移动的div元素，并给它们分别设置id属性，例如：

<button id="moveButton">Move</button>
<div id="movingDiv"></div>

2. 接下来，在CSS中定义移动的动画效果。可以使用CSS的`@keyframes`规则来定义动画的关键帧，然后通过`animation`属性将动画应用到div元素上。例如：

@keyframes moveAnimation {
  0% { left: 0; }
  100% { left: 200px; }
}

#movingDiv {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: red;
  animation: moveAnimation 1s ease-in-out infinite;
}

上述代码定义了一个名为`moveAnimation`的动画，从左边距离为0开始，到左边距离为200px结束。然后将该动画应用到id为`movingDiv`的div元素上，设置动画持续时间为1秒，使用ease-in-out缓动函数，并设置动画无限循环。

3. 最后，在JavaScript中添加事件监听器，当按钮被点击时触发移动动画。可以使用`addEventListener`方法来监听按钮的点击事件，并在事件处理函数中修改div元素的样式。例如：

var moveButton = document.getElementById("moveButton");
var movingDiv = document.getElementById("movingDiv");

moveButton.addEventListener("click", function() {
  movingDiv.style.animationPlayState = "running";
});

上述代码获取id为`moveButton`和`movingDiv`的元素，并为按钮添加点击事件监听器。当按钮被点击时，将div元素的`animationPlayState`属性设置为"running"，即开始播放动画。

这样，当点击按钮时，div元素就会开始移动动画。