如何通过keyframes实现元素对其他元素内部的动画效果？附无效示例

嘿，这个问题我之前也纠结过！先给你说结论：纯靠@keyframes本身没法直接让一个元素的动画驱动另一个元素内部内容的变化，但不是完全没办法，得换点思路；至于为啥直接做不到，主要是CSS本身的规则限制，我给你掰扯清楚：

为啥直接用@keyframes搞不定跨元素动画？ #

• 动画的作用域被锁死了：@keyframes定义的动画是绑定到某个元素的animation属性上的，动画跑起来的时候，只会改这个元素自己的CSS属性，根本没法直接选中别的元素去改样式。
• CSS没给“动画状态传递”的路子：不像JS能监听动画进度然后操作DOM，纯CSS里没办法把一个元素的动画进度（比如走到50%的时候）传递给另一个元素。
• 选择器跟不上动态变化：虽然CSS有兄弟选择器、后代选择器，但这些只能基于元素的静态状态（比如hover、有没有某个类），没法跟着另一个元素的动画动态变。

能实现类似效果的替代玩法 #

如果一定要做跨元素的动画联动，给你俩实用方案：

1. 借CSS变量当“传声筒” #

把动画要传递的值存在CSS变量里，让目标元素去读这个变量。举个例子：

/* 定义动画，只改CSS变量 */
@keyframes moveVar {
  0% { --move-distance: 0; }
  100% { --move-distance: 100px; }
}

/* 触发动画的元素 */
.trigger-box {
  animation: moveVar 2s linear infinite alternate;
}

/* 被影响的目标元素 */
.target-text {
  transform: translateX(var(--move-distance));
}

不过要注意：CSS变量是继承的，所以目标元素得在触发元素的作用域里（比如是它的子元素，或者用:root全局变量），而且这种方式只能传数值类的属性，没法搞复杂的内容切换（比如换文本）。

2. 拉JS来帮忙（复杂场景必备） #

如果要改其他元素的内容（比如文本切换、HTML结构变化），就得靠JS监听动画事件了：

const trigger = document.querySelector('.trigger-box');
const targetContent = document.querySelector('.target-text');

// 监听动画循环事件
trigger.addEventListener('animationiteration', () => {
  // 切换目标元素的文本
  targetContent.textContent = targetContent.textContent === '初始内容' ? '动画触发后变啦！' : '初始内容';
});

// 还能监听动画进度（部分浏览器支持）
trigger.addEventListener('animationupdate', (e) => {
  // 根据动画进度调透明度
  targetContent.style.opacity = e.animationProgress;
});

关于你说的无效示例 #

虽然没看到你的具体代码，但十有八九是在@keyframes里直接嵌套选择器了（比如@keyframes { 50% { .target { color: red; } } }）——这种写法完全不符合CSS语法！keyframes里只能写当前元素的属性，不能套别的选择器哦。

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