bootstrap默认不为navbar品牌logo提供旋转动画，所谓“旋转效果”实为自定义css或第三方插件实现；原生.navbar-brand无transform动画，需通过javascript监听collapse事件并手动切换动画类来实现。
Navbar品牌Logo旋转动画由哪个CSS类控制
Bootstrap默认没有为Navbar品牌Logo提供旋转动画，你看到的“旋转效果”大概率来自自定义CSS或第三方插件（比如Animate.css），或是误把折叠菜单按钮（.navbar-toggler）的旋转当成了Logo动画。原生Bootstrap 5的.navbar-brand元素本身不带任何transform动画，它的折叠/展开行为只影响整个导航栏结构，不触发Logo旋转。
如何给Logo添加自定义旋转动画（移动端触发时）
想在移动端点击菜单按钮时让Logo旋转一圈，得手动监听.navbar-collapse的显示状态变化，不能依赖Bootstrap内置类。常见做法是用JavaScript监听shown.bs.collapse和hidden.bs.collapse事件，再切换Logo上的动画类：
document.addEventListener('DOMContentLoaded', () => {
const logo = document.querySelector('.navbar-brand');
const collapse = document.querySelector('.navbar-collapse');
collapse.addEventListener('shown.bs.collapse', () => {
logo.classList.add('rotate-on-toggle');
});
collapse.addEventListener('hidden.bs.collapse', () => {
logo.classList.remove('rotate-on-toggle');
});
});
对应CSS只需定义一个简单keyframes：
@keyframes rotateLogo {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.rotate-on-toggle {
animation: rotateLogo 0.4s ease-out;
}
为什么直接改.navbar-toggler的旋转不会影响Logo
Bootstrap的汉堡按钮（.navbar-toggler）自带.navbar-toggler-icon，其旋转动画是通过CSS的transform: rotate()控制的，但这个变换只作用于图标本身，跟.navbar-brand完全无关。强行给.navbar-brand加transition: transform .3s也不会自动响应折叠事件——它没被任何JS逻辑驱动。
- 错误做法：试图覆盖
.navbar-toggler-icon的动画来“联动”Logo - 正确路径：独立监听collapse事件，显式控制Logo样式
- 注意：如果用了Bootstrap 4，事件名是
shown.bs.collapse；Bootstrap 5保持一致，但需确保JS在bootstrap.bundle.min.js加载后执行
移动端真机测试时容易忽略的兼容性点
动画在桌面Chrome里跑得飞快，但放到iOS Safari上可能卡顿甚至不触发，原因有几个：
- iOS Safari对
transform动画的硬件加速支持不稳定，建议加transform: translateZ(0)或will-change: transform强制启用GPU渲染 - 部分Android WebView（尤其旧版）不支持
animation-fill-mode: forwards，如果想让Logo停在旋转后状态，别依赖它，用JS手动加class更可靠 - 如果Logo是
<img>标签，注意Safari对SVG内联样式动画的支持较弱，优先用PNG或转成<svg></svg>并内联定义style
真正在意动效细节的话，别只写一次CSS，得在真机上连着DevTools反复测——动画是否准时触发、是否卡帧、是否和折叠动画同步，这些都得手调。
