• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Linear-gradient na tekście pokazuje się dopiero po zakończeniu animacji w Firefox

0 głosów
47 wizyt
pytanie zadane 19 kwietnia 2018 w HTML i CSS przez BT101 Dyskutant (9,670 p.)
edycja 19 kwietnia 2018 przez BT101

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.

komentarz 20 kwietnia 2018 przez rafal612b Nałogowiec (46,000 p.)

Gdy wyrzuciłem opacity z animacji zaczeło działac na FF tylko brakuje opacity.

Na mój gust zadziałało by gdybyś przerobił animacje opacity na przejśce (transition) opacity.

 

PS. bg-clip działał juz w 2011 roku w FF ;) Podaje stronke ktora może nie raz ci pomóc ;)

https://caniuse.com/#search=background-clip

Obecnie nigdzie nie musisz używać prefiksów ;)

komentarz 20 kwietnia 2018 przez BT101 Dyskutant (9,670 p.)

Gdy wyrzuciłem opacity z animacji zaczeło działac na FF tylko brakuje opacity.

Przecież animacja "przesunięcia" działa i z opacity z tym, że nie widać tekstu do momentu zakończenia animacji więc nie widać, że się przesuwa ale się przesuwa co można zauważyć w demo po dodaniu do jednego spana bg-color red; 

Na mój gust zadziałało by gdybyś przerobił animacje opacity na przejśce (transition) opacity.

Nie bardzo rozumiem.. Dałbyś radę poprawić to moje demo i wrzucić link do działającego?

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 83 wizyt
pytanie zadane 19 kwietnia w HTML i CSS przez Milo Użytkownik (880 p.)
+1 głos
1 odpowiedź 54 wizyt
0 głosów
1 odpowiedź 111 wizyt
pytanie zadane 20 sierpnia 2015 w JavaScript, jQuery, AJAX przez Klik Użytkownik (930 p.)
Porady nie od parady
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.SPOJ

65,683 zapytań

112,321 odpowiedzi

237,044 komentarzy

46,657 pasjonatów

Przeglądających: 240
Pasjonatów: 12 Gości: 228

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...