CSS背景色关键帧动画

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;}
}

我尝试了透明度设置，但没有成功。需要帮助。

- user1774640

---

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

我想让背景颜色从鲜红色渐变到浅红色，然后再回来，而不是渐变至透明。 - user1774640

Answer 1

.animation_background_test{
    height:100px;
    -webkit-animation-name: animation;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;    
    -webkit-animation-play-state: running;
    
    animation-name: animation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;    
    animation-play-state: running;
    background-color: #f00;
}

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

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

<div class="animation_background_test"></div>

- Paulie_D

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>

- Mr. Polywhirl