Korzystając z całkiem nowego -webkit-background-clip: text; nadaję tekstu nagłówka h1 kolor gradientu tła. Kod SCSS wygląda tak:
.heading-primary {
font-family: 'Open Sans', sans-serif;
font-size: 5.6rem;
font-weight: 300;
text-transform: uppercase;
backface-visibility: hidden;
letter-spacing: .2rem;
& > span {
display: inline-block;
-webkit-background-clip: text;
color: transparent;
}
&--left {
animation: moveInLeft 1s ease-in;
background-image: linear-gradient(to right, blue, purple);
}
&--right {
animation: moveInRight 1s ease-in;
background-image: linear-gradient(to right, purple, blue);
}
}
W nagłówku h1 mam 2 spany oba zawierająca po dwa słowa. Są one tam po to abym mógł je animować lewe dwa słowa z lewej do prawej i dwa prawe słowa z prawej do lewej.
Ogólnie wszystko działa na większości przeglądarek, na których mi zależy ( najnowszy Chrome, Opera i Edge). Niestety w najnowszym Firefoksie kolor tekstu pokazuje się dopiero po zakończeniu animacji.
Próbowałem zdebugować o co chodzi, dodałem do lewych 2 słów czerwone tło i widzę, że tło się przesuwa a dopiero potem, gdy skończy animacje pokazuje kolor tekstu (2 prawe słowa, lewe zakrywa ten czerwony background).
Stworzyłem demo na którym można to zaobserwować, pamiętajcie żeby uruchomić to na najnowszej Mozilli Firefox.
Próbowałem również dodać -moz-background-clip: text; oraz background-clip: text; lecz zupełnie nie zmienia to efektu tego kodu na mozilli.