如何仅使用内联CSS或不使用CSS实现HTML元素/Logo旋转？

内联style属性无法直接定义@keyframes规则（内联仅支持单个CSS声明，不支持@类规则），但可以通过两种方式实现旋转效果：

方案1：使用CSS内置旋转动画（现代浏览器） #

如果目标浏览器支持CSS Animations Level 4（Chrome 113+、Edge 113+等），可直接在内联样式中调用内置的rotate动画：

<img src="your-logo.png" style="animation: rotate 2s linear infinite; width: 100px;" alt="Logo">

• rotate是浏览器内置的关键帧动画，自动实现360度旋转
• 2s为动画时长，linear保持匀速，infinite让动画循环播放

方案2：兼容旧浏览器的写法 #

若需兼容不支持内置动画的浏览器，必须在全局<style>标签中定义关键帧，再在内联样式里调用（这是目前兼容范围最广的写法）：

<style>
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>
<img src="your-logo.png" style="animation: spin 2s linear infinite; width: 100px;" alt="Logo">

这里的关键帧为全局定义，但动画的调用逻辑完全写在内联style中，符合“仅用内联CSS控制元素样式”的核心需求。

补充说明 #

如果严格要求完全不使用任何全局样式块，目前没有纯内联的解决方案——CSS规范明确禁止在内联style中定义@keyframes这类@规则。上述方案2是平衡兼容性和内联需求的最优解。

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