How to use CSS variables as background color for keyframe animation in Edge browser

问题: I'm trying to use CSS variables as the background-color values. I got it to work in Chrome but not in Edge browser. I'm not sure if I did something wrong or it is a bug wit...

问题:

I'm trying to use CSS variables as the background-color values. I got it to work in Chrome but not in Edge browser. I'm not sure if I did something wrong or it is a bug with the Edge browser.

In this example, the square change background-color from blue to red. But in Edge it's remains white.

:root {
  --blue-color: blue;
  --red-color: red; 
}

@keyframes animatedBackground {
  0% { background-color: var(--blue-color); }
  100% { background-color: var(--red-color); }
}

#animate-area { 
  width: 100px;
  height:100px;

  animation: animatedBackground 1s linear infinite;
}
<div id="animate-area"></div>


回答1:

Here is temporary work around if anyone needs it: If I use the CSS variable as the static background color, the animation will start to work. This feels totally random but it seems to solve the problem.

:root {
  --blue-color: blue;
  --red-color: red; 
}

@keyframes animatedBackground {
  0% { background-color: var(--blue-color); }
  100% { background-color: var(--red-color); }
}

#animate-area { 
  width: 100px;
  height:100px;
  background-color: var(--blue-color); /* this fixed it! */

  animation: animatedBackground 1s linear infinite;
}
<div id="animate-area"></div>

  • 发表于 2018-07-14 00:54
  • 阅读 ( 284 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除