Warum übergänge für einige CSS-Eigenschaften sind langsam, und keiner fließend

Verbrachte ich in einem Kampf von 4 Stunden auf eine einfache transition mit einem akzeptablen Leistung:

Zuerst habe ich versucht diesen code :

left: 2000px;
-webkit-transition: left 1s linear;
-moz-transition: left 1s linear;
-ms-transition: left 1s linear;

War das Ergebnis schrecklich auf Chrome v21.0.1180.89 und FireFox v15.0.1, aber toll war auf IE10.
Ich nahm die Auslastung von CPU und GPU-Nutzung-graph und festgestellt, dass chrome nicht nutzt GPU für die grundlegenden css-Eigenschaften, Warum übergänge für einige CSS-Eigenschaften sind langsam, und keiner fließend
Warum übergänge für einige CSS-Eigenschaften sind langsam, und keiner fließend
Was ist die Lösung für moderne Browser?

  • Die Lösung für moderne Browser ist die hardware-Beschleunigung auch alles so wie IE.
InformationsquelleAutor Ata Iravani | 2012-09-10
  1. 19

    Nicht verwenden Sie die Links-oder top-bottom, margin-oder padding-Eigenschaften, um Elemente verschieben, aber nur "transform: translate".

    In der gleichen Weise, um die Größe von Elementen verwenden Sie nur "transform: scale" anstelle von Höhe oder Breite.

    Left, top, bottom, margin, padding, height, width Eigenschaften (und viele andere), zwingen Sie den browser neu zu berechnen: das layout, also die geometrie von vielen Elementen, mit viel CPU-Arbeit.

    Jede Eigenschaft hat ein anderes Gewicht, in diesem Artikel ist es genau erklärt
    high-performance-Animationen

    Edit1: triggers.com scheint eine gute Seite, wenn Sie don T erinnern, jede Eigenschaft Gewicht

    InformationsquelleAutor Andrea Mattioli
  2. 15

    Als das Ergebnis meines 4-Stunden-Experimente ist es besser, zu verwandeln, wie unten:

            -webkit-transform: translate(2000px, 0);
        -webkit-transition: -webkit-transform 1s linear;
        -moz-transform: translate(2000px, 0);
        -moz-transition: -moz-transform 1s linear;
        -ms-transform: translate(2000px, 0);
        -ms-transition: -ms-transform 1s linear;

    Dieser war toll auf IE10, Chrome v21.0.1180.89 und FireFox v15.0.1.

    Hinweis: IE9 unterstützt nicht tarnsforms

    • Ich wünschte, webkit-Unterstützung die Nutzung der GPU für grundlegende CSS-Eigenschaft transition.
    • IE9 unterstützt Transformationen, aber nicht animierte übergänge
    InformationsquelleAutor Ata Iravani
Schreibe einen Kommentar