css - animation颜色变化的问题

问题描述

问 题

这是初始颜色值

具体看demo

但是写上动画效果后颜色值就变了，这个是什么原因，怎么可以让动画颜色和初始值颜色一致

解决方案

问题出在使用了step(2);

animation-timing-function改成step(1);
bg方法改成0%和50%;

.min-circle:nth-child(2n - 1) {
  -webkit-animation: bg 2s steps(1) infinite;
          animation: bg 2s steps(1) infinite;
}
@keyframes bg {
 0% {
   background: #ff3c18;
  }
  50% {
    background: #ffea67;
  }
}

这篇关于css - animation颜色变化的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！