div从右向全宽滑动

<div id="myDiv">Hello, World!</div>

#myDiv {
  width: 100px;
  height: 100px;
  background-color: red;
}

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

// 监听点击事件
myDiv.addEventListener("click", function() {
  // 添加动画类名
  myDiv.classList.add("slide-animation");
});

// 监听动画结束事件
myDiv.addEventListener("animationend", function() {
  // 移除动画类名
  myDiv.classList.remove("slide-animation");
});

@keyframes slide {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

.slide-animation {
  animation: slide 1s forwards;
}