仅用CSS实现元素悬停转180度、移出同方向完成360度回原位效果怎么写？

实现方案 #

你要的效果核心是让鼠标移出时，元素的过渡终点为360度而非0度（两者视觉完全一致），避免反向回转，以下提供两种可直接使用的实现方式：

方案1：纯CSS实现（无JS依赖） #

利用CSS动画分别定义悬停和移出阶段的旋转目标，自动保持同方向转动，适配所有现代浏览器：

/* 悬停阶段动画：旋转到180度位置 */
@keyframes hoverRotate {
  to {
    transform: rotate(180deg);
  }
}

/* 移出阶段动画：旋转到360度位置，和0度视觉完全一致 */
@keyframes leaveRotate {
  to {
    transform: rotate(360deg);
  }
}

.header-popup .link-icon {
  /* 初始值设为360度，和0度视觉一致，不会触发初始多余动画 */
  transform: rotate(360deg);
  animation: leaveRotate 0.2s ease-in-out forwards;
}

.header-popup:hover .link-icon {
  animation: hoverRotate 0.2s ease-in-out forwards;
}

方案2：CSS+JS实现（100%方向可控） #

如果需要严格固定为顺时针旋转，不会出现浏览器角度计算的方向歧义，推荐使用少量JS配合实现：

CSS代码

.header-popup .link-icon {
    transition: transform 0.2s ease-in-out;
    transform: rotate(0deg);
}
.header-popup--hover .link-icon {
    transform: rotate(180deg);
}

JS代码

const popupEl = document.querySelector('.header-popup');
const iconEl = popupEl.querySelector('.link-icon');

// 鼠标进入时触发旋转到180度
popupEl.addEventListener('mouseenter', () => {
  popupEl.classList.add('header-popup--hover');
});

// 鼠标移出时触发继续旋转到360度
popupEl.addEventListener('mouseleave', () => {
  iconEl.style.transform = 'rotate(360deg)';
});

// 过渡结束后重置角度，为下次交互做准备
iconEl.addEventListener('transitionend', (e) => {
  if (e.propertyName === 'transform' && !popupEl.matches(':hover')) {
    // 临时关闭过渡，瞬间重置角度为0无视觉变化
    iconEl.style.transition = 'none';
    iconEl.style.transform = 'rotate(0deg)';
    // 恢复过渡设置
    setTimeout(() => {
      iconEl.style.transition = '';
      iconEl.style.transform = '';
      popupEl.classList.remove('header-popup--hover');
    }, 0);
  }
});

内容的提问来源于stack exchange，提问作者Alexander