实现Hover时同时触发缩放动画与无限旋转动画

问题出在你同时给伪元素绑定了两个修改transform属性的动画，CSS中多个动画对同一属性的修改会相互覆盖，导致缩放完成后旋转动画无法正常持续生效。我们可以把缩放效果用**过渡（transition）实现，旋转效果用动画（animation）**单独处理，这样两者就能同时生效：

修改后的CSS代码 #

body{
 background:black;
 display:flex;
 justify-content:center;
 align-items:center;
 width:100%;
 height:100vh;
 margin: 0;
}
.full-rounded-link {
    position: relative;
    border: 1px solid;
    border-radius: 50%;
    height:60px;
    width:60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #191F2A;
    border-color: #191F2A;
    z-index: 1;
}
.full-rounded-link a {
 color:white;
 text-decoration: none;
}
.full-rounded-link::before {
    content: "";
    background: red;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    transform: scale(0);
    z-index: -1;
    border: 1px dashed #fff;
    /* 用过渡实现缩放动画 */
    transition: transform 0.5s ease;
}
.full-rounded-link:hover::before { 
  transform: scale(1);
  /* 单独绑定旋转无限动画 */
  animation: spin 10s linear infinite;
}
.full-rounded-link:not(:hover)::before {
  transform: scale(0);
  /* 离开时停止旋转动画 */
  animation: none;
}

@keyframes spin {
  0% {
   transform: scale(1) rotate(0deg);
  }
  100% {
   transform: scale(1) rotate(360deg);
  }
 }

修改说明 #

• 将缩放效果从动画改为transition，hover时伪元素会立即开始缩放，过渡结束后保持scale(1)状态。
• 旋转动画spin中明确保留scale(1)，确保旋转过程中伪元素不会缩放回去。
• hover时同时触发缩放过渡和旋转动画，离开时重置缩放并停止旋转，完美实现预期效果。

对应HTML代码 #

<div class="full-rounded-link">
  <a href="/my-link">
    a link
  </a>
</div>

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