如何在内联CSS中添加@keyframes？尝试style属性未生效

内联style属性本身不支持直接写入@keyframes规则——因为@keyframes是CSS的全局规则，不属于单个元素的内联样式声明范畴，这就是你直接放在style里没生效的原因。

不过有两种可行的实现方式：

1. 内嵌<style>定义关键帧，内联引用动画名 #

先在页面的<style>标签里定义好关键帧，再在元素的内联style中直接引用动画名称：

<style>
  @keyframes slide-in {
    0% { opacity: 0; transform: translateX(-50px); }
    100% { opacity: 1; transform: translateX(0); }
  }
</style>
<div style="width: 100px; height: 100px; background: blue; animation: slide-in 0.8s ease-out forwards;">
  滑入的盒子
</div>

2. JavaScript动态生成关键帧并绑定 #

如果需要完全动态的实现（不想写静态<style>），可以用JS创建样式规则，再给元素设置内联动画：

// 创建样式表并添加到页面头部
const styleEl = document.createElement('style');
document.head.appendChild(styleEl);

// 插入关键帧规则
styleEl.sheet.insertRule(`
  @keyframes bounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
    100% { transform: translateY(0); }
  }
`, 0);

// 目标元素添加内联动画
const target = document.querySelector('.dynamic-box');
target.style.animation = 'bounce 1s infinite';

对应的HTML结构：

<div class="dynamic-box" style="width: 60px; height: 60px; background: orange;">
  动态弹跳盒子
</div>

总结：不存在纯粹只用元素内联style属性实现@keyframes的方法，必须借助全局样式规则（不管是静态内嵌还是JS动态生成），再通过内联样式引用动画名称。

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