Vue项目CSS动画问题：齿轮图标hover不旋转，opacity属性却生效

问题描述 #

在Vue项目里，鼠标悬停在类名为bi-gear-fill的齿轮图标上时，设置rotate:360deg无法触发旋转效果，但将属性替换为opacity时图标会消失，说明hover触发逻辑是正常的。

相关代码 #

Vue组件代码

<template>
  <nav>
    <router-link class="navbar settings" to="/settings"
      ><i class="bi bi-gear-fill"></i> Settings</router-link
    >
  </nav>
</template>

<script>
export default {
  name: "NavBar",
};
</script>

<style src="../style/navbar.css"></style>

CSS样式代码（navbar.css）

:root {
  --main-color-dark-hover: #0f5e80;
  --main-color-dark: #1b8bbf;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  width: 50%;
  font-weight: bold;
  letter-spacing: 1px;
}

.navbar {
  color: var(--main-color-dark);
  font-size: 20px;
  text-decoration: none;
}

.navbar:hover,
.navbar:active {
  cursor: pointer;
  color: var(--main-color-dark-hover);
  transform: translateY(2.5px);
  transition: transform 0.5s;
}

.navbar.settings:hover .bi-gear-fill {
  transition: rotate 1s;
  rotate: 360deg;
}

解决方法 #

核心问题 #

rotate作为独立CSS属性，浏览器支持度不如transform属性下的rotate()方法，且父元素的transform变换会干扰子元素的独立变换渲染，导致旋转动画不生效。

修改方案 #

改用transform: rotate()实现旋转，并优化过渡逻辑：

1. 调整齿轮图标的hover样式：

.navbar.settings:hover .bi-gear-fill {
  transition: transform 1s linear;
  transform: rotate(360deg);
}

2. 可选：添加初始状态确保每次hover都触发完整旋转（部分场景需要）：

.bi-gear-fill {
  transform: rotate(0deg);
  transition: transform 1s linear;
}

.navbar.settings:hover .bi-gear-fill {
  transform: rotate(360deg);
}

3. 优化父元素过渡，避免与子元素动画冲突：

.navbar {
  color: var(--main-color-dark);
  font-size: 20px;
  text-decoration: none;
  transition: transform 0.5s, color 0.5s; /* 明确过渡属性 */
}

.navbar:hover,
.navbar:active {
  cursor: pointer;
  color: var(--main-color-dark-hover);
  transform: translateY(2.5px);
}

.bi-gear-fill {
  display: inline-block; /* 确保图标支持变换属性 */
  transition: transform 1s linear;
}

.navbar.settings:hover .bi-gear-fill {
  transform: rotate(360deg);
}

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