css 怎么实现点击一次按钮div慢慢从右边出来 再次点击又从左边到右边慢慢消失的动画效果用代码实现一下

可以使用CSS3的Animations和Transforms来实现该效果。下面是一个简单的实现示例：

HTML代码：

<button id="myBtn">点击我</button>
<div id="myDiv">Hello, world!</div>

CSS代码：

#myBtn {
  background-color: orange;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

#myDiv {
  background-color: lightblue;
  color: #fff;
  width: 200px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateX(-200px);
  animation: slideInRight 1s forwards;
}

@keyframes slideInRight {
  0% {
    transform: translateX(-200px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

#myDiv.hidden {
  animation: slideOutLeft 1s forwards;
}

@keyframes slideOutLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-200px);
    opacity: 0;
  }
}

JavaScript代码：

var myBtn = document.getElementById("myBtn");
var myDiv = document.getElementById("myDiv");

myBtn.onclick = function() {
  myDiv.classList.toggle("hidden");
};

注释：当点击按钮时，JavaScript代码会为myDiv元素添加或删除“hidden”类，以触发动画效果。其中，slideInRight（从右边滑入）和slideOutLeft（从左边滑出）两个动画均使用了同一个CSS3动画关键帧。