Совместимая с Firefox CSS3 анимация

Я пытаюсь преобразовать эту анимацию веб-катиона CSS3 в совместимость с несколькими браузерами - в основном в Firefox.Совместимая с Firefox CSS3 анимация

Похоже, что элементы 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); } 
      }

источник

2015-03-10 Phil Hudson

Проверьте этот MDN, чтобы увидеть, какие фильтры поддерживаются, 'hue-rotate' не является одним из них: ht tps: //developer.mozilla.org/en-US/docs/Web/CSS/filter – somethinghere

@somethinghere Я могу видеть это на полпути вниз по указанной странице? –

Мне тоже большая проблема в том, что 'background-clip: text' не поддерживается в FF – SWa

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

источник

2015-03-10 11:19:28 somethinghere

Совместимая с Firefox CSS3 анимация

ответ

Смежные вопросы