CSS背景颜色关键帧动画

Posted 2023-03-06

【中文标题】CSS背景颜色关键帧动画

【英文标题】：CSS background color keyframes animation

【发布时间】：2014-08-13 07:59:13

【问题描述】：

我正在尝试为 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;

我试过摆弄不透明度设置，但没有成功。任何帮助表示赞赏。

【问题讨论】：

请详细说明您想要实现的目标...

我希望背景颜色从鲜红色变为浅红色，然后再变回来，而不会使颜色变透明。

【参考方案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

【参考方案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>