CSS背景色关键帧动画

lkaoscv7 于 2023-02-10 发布在其他

关注(0)|答案(2)|浏览(151)

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

我试过摆弄不透明设置，但没有成功。任何帮助都是非常感谢的。

css

来源：https://stackoverflow.com/questions/24363205/css-background-color-keyframes-animation

2条答案

按热度按时间

unguejic1#

.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>

赞(0）回复(0）举报 2023-02-10

ulydmbyx2#

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

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>

赞(0）回复(0）举报 2023-02-10

我来回答

CSS背景色关键帧动画

2条答案

相关问题

热门标签

最新问答