Animacja CSS Błąd w Firefoksie

Question

Mam animację CSS na stronie internetowej, aby wywołać efekt na przycisku.

W Chrome i IE jest dobrze, ale w Firefoksie mam brzydki problem.

Niektóre białe kawałki wciąż stoi po najechaniu.

animacji CSS:

.Hotel:hover{ 
    animation-name: pulse; 
    animation-duration: 1s; 
} 


@-webkit-keyframes pulse { 
    from { 
    -webkit-transform: scale3d(1, 1, 1); 
    transform: scale3d(1, 1, 1); 
    } 

    50% { 
    -webkit-transform: scale3d(100.10, 10.10, 10.10); 
    transform: scale3d(100.10, 10.10, 10.10); 
    } 

    to { 
    -webkit-transform: scale3d(1, 1, 1); 
    transform: scale3d(1, 1, 1); 
    } 
} 

@keyframes pulse { 
    from { 
    -webkit-transform: scale3d(1, 1, 1); 
    transform: scale3d(1, 1, 1); 
    } 

    50% { 
    -webkit-transform: scale3d(1.80, 1.80, 1.80); 
    transform: scale3d(1.80, 1.80, 1.80); 
    } 

    to { 
    -webkit-transform: scale3d(1, 1, 1); 
    transform: scale3d(1, 1, 1); 
    } 
} 

Answer 1

wszystko wygląda dobrze może to być spowodowane ustawieniami akceleracji sprzętowej nie być na

akceleracji sprzętowej, gdy użycie dostępnych włączony.

Obecnie przeglądarkach takich jak Chrome, Firefox, Safari, IE9 + i najnowszej wersji Opery cały statek z przyspieszeniem sprzętowym; używają go tylko , gdy mają wskazówkę, że korzystałby z tego element DOM. W CSS najsilniejszym wskazaniem jest to, że transformacja 3D jest zastosowana do elementu. Od kiedy już to zrobiono, wtedy inne niż akceleracja sprzętowa nie wydaje się być problemem w mojej przeglądarce.

W przeglądarkach Chrome i Safari możemy zobaczyć migotanie podczas korzystania z transformacji CSS lub animacji. Następujące deklaracje mogą być wykorzystane, aby rozwiązać problem:

.className{ 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 

    backface-visibility: hidden; 

    -webkit-perspective: 1000; 
    -moz-perspective: 1000; 
    perspective: 1000; 
    /* Other transform properties here */ 
} 

Inną metodą, która wydaje się działać dobrze w WebKit zasilany stacjonarnych i mobilnych przeglądarek jest translate3d:

.className{ 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    /* Other transform properties here */ 
} 

natywne aplikacje mobilne również dobrze wykorzystać urządzenia GPU - dzięki temu wiadomo, że działają nieco lepiej niż aplikacje internetowe. Przyspieszanie sprzętowe może być szczególnie przydatne na urządzeniach mobilnych, ponieważ pomaga zmniejszyć zużycie zasobów urządzenia.