怎么让鼠标悬停在元素上方时执行css动画停在一半离开时继续并结束

可以通过CSS中的:hover伪类和transition属性来实现这个效果。具体步骤如下：

在元素上添加一个CSS过渡效果，例如使用transition属性设置动画时长和过渡类型。
使用:hover伪类选择器来定义当鼠标悬停在元素上方时的样式。
在:hover伪类中使用CSS动画属性，例如animation-play-state属性，来控制动画的播放状态。
在CSS动画属性中使用关键帧（@keyframes）来定义动画的起始和结束状态。

下面是一个示例代码，可以让鼠标悬停在一个div元素上时执行动画，离开时继续并结束：

HTML代码：

<div class="box"></div>

CSS代码：

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: all 1s ease;
  animation: move 2s infinite alternate;
}

.box:hover {
  animation-play-state: paused;
}

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(200px); }
}

在这个示例中，当鼠标悬停在.box元素上时，动画会暂停在一半的位置。当鼠标离开元素时，动画会继续播放并最终结束。动画效果是让元素沿着X轴方向移动200像素，持续时间为2秒，无限循环并交替反转。