Question

我试图将此CSS3 webkit动画转换为跨浏览器兼容 - 主要是在Firefox中。

似乎支持CSS3元素，但我没有运气。任何建议都将不胜感激！

Plunkr：http://plnkr.co/edit/UlLIcnQRAsjY5CGEvKxq?p=catalogue

  .site__title {
    color: #f35626;
    background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 60s infinite linear;
    background-image: -moz-linear-gradient(92deg,#f35626,#feab3a);
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
-moz-animation: hue_m 60s infinite linear;
  }

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }

  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

 @-moz-keyframes hue_m{
                from { -moz-filter: hue-rotate(0deg); }
                to { -moz-filter: hue-rotate(-360deg); }
            }

Answer 1

Firefox不支持带前缀的关键帧，只支持官方语法，因此这适用于除Safari（或-webkit-）之外的所有其他浏览器：

@keyframes hue_m {
    from { 
        -moz-filter: hue-rotate(0deg);
        -ms-filter: hue-rotate(0deg);
        filter: hue-rotate(0deg);
    }
    to { 
        -moz-filter: hue-rotate(-360deg);
        -ms-filter: hue-rotate(0deg);
        filter: hue-rotate(-360deg);
    }
}

请在此处查看MDN上关键帧的说明：https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

Firefox兼容CSS3动画

1 个答案: