Question

我正在尝试为firefox（主题化）中的工具栏背景颜色设置一个简单的淡入/淡出动画。问题是，我的颜色完全消失到透明。我希望我的颜色在中途褪色，然后开始缓和回到全彩色。

我列出了我尝试过的代码......

toolbar{
    animation-name: animation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;    
    animation-play-state: running;
}

@keyframes animation {
    50.0%  {background-color:red;}
}

我试图摆弄不透明度设置而没有运气。任何帮助表示赞赏。

Answer 1

@-webkit-keyframes animation {
    0%     {background-color:red;}
    50.0%  {background-color:#ff6666;} /* your chosen 'mid' color */
    100.0%  {background-color:red;}
}

@keyframes animation {
    0%     {background-color:red;}
    50.0%  {background-color:#ff6666;}
    100.0%  {background-color:red;}
}

JSfiddle Demo

Answer 2

您可以使用关键帧旋转颜色。

const generateKeyFrames = (head, ...rest) => ((colors) =>
  colors.map((v, i, a) =>
    `${
      (i * (100 / (a.length - 1))).toFixed(2).padStart(8, ' ')
    }% { background-color: ${
      v.padEnd(Math.max(...colors.map(c => c.length)), ' ')
    } };`)
  .join('\n')
)([head, ...rest, head])

console.log(generateKeyFrames('red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'));

body {
  -webkit-animation-name: animation;
  -webkit-animation-duration: 10s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-play-state: running;
  animation-name: animation;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@-webkit-keyframes animation {
    0.00% { background-color: red;    }
   14.29% { background-color: orange; }
   28.57% { background-color: yellow; }
   42.86% { background-color: green;  }
   57.14% { background-color: blue;   }
   71.43% { background-color: indigo; }
   85.71% { background-color: violet; }
  100.00% { background-color: red; }
}

@keyframes animation {
    0.00% { background-color: red;    }
   16.67% { background-color: orange; }
   33.33% { background-color: yellow; }
   50.00% { background-color: green;  }
   66.67% { background-color: blue;   }
   83.33% { background-color: indigo; }
  100.00% { background-color: violet; }
}

<div class="colors"></div>

CSS背景色关键帧动画

2 个答案: