CSS Translate在Hover移出时复位问题（已使用inline-block）

我一眼就发现问题所在了——你只在hover状态下给元素添加了过渡动画（transition），但元素的初始常态样式里并没有定义过渡属性。这就导致：当鼠标移上去时，元素有平滑的动画效果；但鼠标移出时，元素会直接跳回初始位置，完全没有过渡，看起来就像“自动复位”一样。

核心原因 #

CSS的transition属性需要定义在元素的基础样式中，这样不管状态如何切换（比如从hover回到常态），过渡动画都会生效。你目前只在:hover伪类里设置了transition，所以只有鼠标移入的过程有动画，移出时没有。

修改方案 #

我们需要把过渡属性移到元素的基础样式里，hover状态下只保留必要的延迟或特殊参数即可：

1. 给.domain-info-group添加基础过渡
   在.domain-info-group的初始样式中加入过渡属性，这样位移变化在移入和移出时都会有平滑动画：

   .domain-info-group { 
     display: inline-block; 
     width: 6.5em; 
     height: 6.5em; 
     position: absolute; 
     top: 30%; 
     left: 30%; 
     -webkit-transform: translate(-30%, -30%); 
     transform: translate(-30%, -30%); 
     /* 新增：基础过渡设置 */
     -webkit-transition: all 1s ease;
     transition: all 1s ease;
   }
   

2. 给.domain-name添加基础过渡
   同样，把opacity的过渡移到.domain-name的基础样式里，这样文字在移出时会平滑淡出：

   .domain-name { 
     opacity: 0; 
     /* 新增：透明度过渡 */
     -webkit-transition: opacity 1s ease-in-out;
     transition: opacity 1s ease-in-out;
   }
   

3. 简化hover状态的过渡代码
   现在基础样式已经有了过渡属性，hover时只需要设置延迟时间即可（不需要重复写完整的transition）：

   /* 以第一个子元素为例，其他子元素同理修改 */
   .domain-cluster:hover .domain-info-group:nth-child(1) { 
     -webkit-transform: translate(0); 
     transform: translate(0); 
     /* 只保留延迟，继承基础的transition属性 */
     -webkit-transition-delay: 0.1s;
     transition-delay: 0.1s;
   }
   /* 移除hover状态下.domain-name的transition，因为基础样式已经有了 */
   .domain-cluster:hover .domain-info-group:nth-child(1) .domain-name { 
     opacity: 1; 
   }
   

完整修改后的CSS片段（关键部分） #

.align-middle { vertical-align: middle !important; }
.text-muted { color: #6c757d !important; }
.text-center { text-align: center !important; }
.badge-info { color: #fff; background-color: #17a2b8; border-color: #17a2b8; }
.domain-info-group { 
  display: inline-block; 
  width: 6.5em; 
  height: 6.5em; 
  position: absolute; 
  top: 30%; 
  left: 30%; 
  -webkit-transform: translate(-30%, -30%); 
  transform: translate(-30%, -30%); 
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
.domain-cluster { width: 50em; height: 50em; position: absolute; top: 30%; left: 30%; -webkit-transform: translate(-30%, -30%); transform: translate(-30%, -30%); }
.domain-name { 
  opacity: 0; 
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.domain-circle { border-radius: 50%; width: 1.6em; height: 1.6em; font-size: 4em; transition: box-shadow 0.3s ease-in-out; }

/* 所有hover状态下的transition改为只设置delay */
.domain-cluster:hover .domain-info-group:nth-child(1) { 
  -webkit-transform: translate(0); 
  transform: translate(0); 
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.domain-cluster:hover .domain-info-group:nth-child(1) .domain-name { opacity: 1; }
.domain-cluster:hover .domain-info-group:nth-child(1) .domain-circle { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }

.domain-cluster:hover .domain-info-group:nth-child(2) { 
  -webkit-transform: translate(-10em, 0em); 
  transform: translate(-10em, 0em); 
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.domain-cluster:hover .domain-info-group:nth-child(2) .domain-name { opacity: 1; }
/* 其他子元素的hover样式以此类推修改 */

这样修改后，当鼠标移出.domain-cluster时，所有元素都会平滑过渡回初始位置，不会再出现突然复位的情况。

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