如何在梯形上设置两个以上的点的动画？

<div class="trapezoid"></div>

.trapezoid {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

var trapezoid = document.querySelector('.trapezoid');
trapezoid.addEventListener('click', function() {
  trapezoid.classList.toggle('animate');
});

@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(200px); }
  100% { transform: translateX(0); }
}

.animate {
  animation: move 2s infinite;
}