Pourquoi les transitions pour certaines propriétés CSS sont lents et aucun couramment

J'ai passé un bout de 4 heures sur une simple transition avec une performance acceptable:

J'ai d'abord essayé ce code :

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

Le résultat a été terrible sur Chrome v21.0.1180.89 et FireFox v15.0.1, mais a été grande sur IE10.
J'ai capturé l'utilisation CPU et GPU graphique d'utilisation et a constaté que chrome ne pas utiliser le GPU pour la base de propriétés css, Pourquoi les transitions pour certaines propriétés CSS sont lents et aucun couramment
Pourquoi les transitions pour certaines propriétés CSS sont lents et aucun couramment
Quelle est la solution moderne pour les navigateurs?

  • La solution pour les navigateurs modernes est-à-matériel-accélérer tout comme IE.
InformationsquelleAutor Ata Iravani | 2012-09-10
  1. 19

    N'utilisez pas de gauche ou en haut, en bas, à la marge ou le rembourrage des propriétés de déplacer les éléments, mais seulement "transformer: traduire".

    De la même manière, pour redimensionner des éléments en "transform: scale" au lieu de la hauteur ou la largeur.

    À gauche, en haut, en bas, margin, padding, la hauteur, la largeur des propriétés (et beaucoup d'autres) forcer le navigateur à recalculer toutes les mise en page, de sorte que la géométrie de nombreux éléments, avec beaucoup de CPU à travailler.

    Chaque propriété a un poids différent, dans cet article, il est clairement expliqué
    haute performance des animations

    Edit1: triggers.com semble être une bonne page si vous n'avez pas se souvenir de chaque propriété poids

    InformationsquelleAutor Andrea Mattioli
  2. 15

    Comme le résultat de mes 4 heures expériences, il est préférable d'utiliser transformer comme ci-dessous:

            -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;

    Ce fut une grande sur IE10, Chrome, la version v21.0.1180.89 et FireFox v15.0.1.

    Note: IE9 ne prend pas en charge tarnsforms

    • Je souhaite support de webkit utiliser le GPU pour le CSS de base de la propriété de la transition.
    • IE9 prend en charge les transformations, mais pas des transitions animées
    InformationsquelleAutor Ata Iravani