css - 文本上的 Webkit 颜色过渡循环在 Firefox 中不起作用

Question

我希望我的 H3 标签无限循环地改变颜色。我的代码在 Safari 中运行良好，但 Firefox 没有让标签改变颜色？

这是我的代码:

    h3 {color: #333 !important;}
@-webkit-keyframes colours {
      0% {color: #333;}
     15% {color: #8bc5d1;}
     30% {color: #f8cb4a;}
     45% {color: #95b850;}
     60% {color: #944893;}
     75% {color: #c71f00;}
     90% {color: #bdb280;}
    100% {color: #333;}
}
h3 {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 60s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: colours;
    -webkit-animation-timing-function: ease;
}

Answer 1

您正在使用 -webkit 前缀，它只能在支持 webkit 的浏览器中工作。您可以添加无前缀版本以支持支持该语法的现代浏览器，也可以为所有浏览器添加前缀版本。

h3 {
  color: #333;
}


@-webkit-keyframes colours {
  0% {
    color: #333;
  }
  15% {
    color: #8bc5d1;
  }
  30% {
    color: #f8cb4a;
  }
  45% {
    color: #95b850;
  }
  60% {
    color: #944893;
  }
  75% {
    color: #c71f00;
  }
  90% {
    color: #bdb280;
  }
  100% {
    color: #333;
  }
}


@keyframes colours {
  0% {
    color: #333;
  }
  15% {
    color: #8bc5d1;
  }
  30% {
    color: #f8cb4a;
  }
  45% {
    color: #95b850;
  }
  60% {
    color: #944893;
  }
  75% {
    color: #c71f00;
  }
  90% {
    color: #bdb280;
  }
  100% {
    color: #333;
  }
}

h3 {
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 60s;
          animation-duration: 60s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: colours;
          animation-name: colours;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}

<h3>foo</h3>