如何在没有javascript的情况下停止CSS动画

在没有JavaScript的情况下停止CSS动画，可以通过以下方法：

使用CSS关键帧动画

使用CSS关键帧动画可以在一定时间内改变元素的样式，并在动画结束时保持最终样式。例如：

@keyframes example {
  0% {
    background-color: red;
    transform: translateY(0);
  }
  100% {
    background-color: yellow;
    transform: translateY(-20px);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

在这个例子中，.box元素的背景颜色和位置将在2秒内改变，并在动画结束时保持最终样式。

使用CSS属性animation-fill-mode: forwards

animation-fill-mode属性用于指定动画结束后元素的样式。将其设置为forwards可以使元素保持动画结束时的样式。例如：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

在这个例子中，.box元素的背景颜色将在2秒内改变，并在动画结束时保持最终样式。

总结：在没有JavaScript的情况下停止CSS动画，可以使用CSS关键帧动画和animation-fill-mode: forwards属性来实现。这样可以保持元素在动画结束时的最终样式，从而达到停止动画的效果。