文本上的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>