如何在CSS关键帧动画中适配当前元素背景色以支持深色模式？

1. 先声明全局CSS变量（适配深色模式） #

在全局样式里给根元素:root定义对应变量，再通过深色模式媒体查询自动切换变量值：

:root {
  --background-color: #fff; /* 浅色模式背景色 */
  --border-color: black;    /* 浅色模式边框色 */
}

/* 跟随系统深色模式自动切换 */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #1a1a1a; /* 深色模式背景色 */
    --border-color: #ccc;        /* 深色模式边框色 */
  }
}

如果你的深色模式是通过自定义类（比如.dark-mode）手动切换的，把媒体查询换成类选择器即可：

.dark-mode {
  --background-color: #1a1a1a;
  --border-color: #ccc;
}

2. 修改@keyframes中的属性 #

直接把固定颜色值替换成对应的CSS变量：

@keyframes your-animation-name {
  0% {
    transform: rotateX(0);
    background: var(--background-color);
    border-color: var(--border-color);
  }

  45% {
    transform: rotateX(90deg);
    background: var(--background-color);
    border-color: var(--border-color);
  }

  /* 其他动画阶段... */
}

核心逻辑 #

CSS变量会根据当前主题模式（系统自动或手动切换）动态更新值，动画里引用变量后，就能自动获取当前主题的背景色，不需要修改@keyframes本身的结构。

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