Блог

Главная - Вопросы по программированию - Анимация ключевых кадров цвета фона CSS

Анимация ключевых кадров цвета фона CSS

#css #firefox #animation

#css #firefox #Анимация

Вопрос:

Я пытаюсь анимировать простое включение / выключение для цвета фона панели инструментов в 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. Пожалуйста, объясните, чего вы хотите достичь, более подробно…

2. Я бы хотел, чтобы цвет фона менялся с ярко-красного на светло-красный, а затем обратно, при этом цвет не становился прозрачным.

Ответ №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

Ответ №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>