Explication détaillée des différences entre les trois propriétés de transformation, de transition et d'animations en CSS3

J'ai récemment utilisé les propriétés d'animation en CSS3 dans mon projet. Souvent facilement confondu. J'ai donc vérifié certaines informations sur Internet et les ai résumées afin que mes amis dans le besoin puissent s'y référer et apprendre.

Transform
Dans certains cas de test, chaque fois que l'attribut transform est démontré, il semble être animé. Cela fait penser à un petit nombre de personnes dotées d'une pensée intuitive que l'attribut de transformation est un attribut d'animation. Au contraire, l'attribut transform est un attribut statique. Une fois écrit dans le style, son effet sera affiché directement sans aucun processus de modification. L'objectif principal de la transformation est d'effectuer des déformations spéciales des éléments, ce qui n'est pas étranger aux concepteurs. En termes simples, il s'agit d'un outil de déformation graphique CSS.

Concernant la définition de l'origine parmi les conditions de base de la déformation graphique, transform-origin est utilisée pour la définir en CSS. L'origine de cette définition doit être calculée à partir du coin supérieur gauche de l'élément affecté par le CSS comme 0,0. D'autres attributs sont calculés sur la base de cet attribut.

Concernant le mode de changement graphique, transform-style est défini dans le standard CSS3. La valeur par défaut est plate, ce qui affiche un effet simple. Et préserver-3d restitue l'espace en mode 3D. D'après une pensée normale, vous ne devriez avoir besoin que depreserve-3d, mais à en juger par la rumeur selon laquelle "l'accélération GPU est utilisée lorsquepreserve-3d est activée", cet attribut peut être utilisé pour réduire la consommation du système. Après tout, la 3D est meilleure que la 2D. Cela nécessite une dimension de calcul supplémentaire.

Si vous devez utiliser le mode 3D, vous devez d'abord spécifier le style comme 3D et ajouter la perspective et l'origine de la perspective à n'importe quel élément parent pour spécifier le point de perspective.

Il existe cinq attributs spécifiques utilisés par les concepteurs pour modifier les styles d'éléments :

1. translation3d(x,y,z) est utilisé pour contrôler la position des éléments sur la page. les trois axes ;
2. rotate(deg) est utilisé pour contrôler l'angle de rotation de l'élément
3. skew[x,y](deg) Cet attribut est utilisé pour créer l'inclinaison ; done Les concepteurs savent peut-être qu'il s'agit d'un attribut nécessaire lors de la création d'une perspective 3D en 2D
4. scale3d(x,y,z) est utilisé pour zoomer et dézoomer, et l'attribut est un rapport
5 ; . matrice3d, matrice CSS. Grâce à cet attribut matriciel, toutes les valeurs d'attribut ci-dessus sont couvertes, mais je pense personnellement que la lisibilité est extrêmement mauvaise (ce sont tous des chiffres et des unités, ce qui est un peu flou à mémoriser), et il n'y a actuellement aucune raison de recommander son utilisation.

De manière générale, il n'y a aucune différence entre les propriétés de la transformation CSS et les propriétés initialement utilisées de gauche, droite, haut et bas d'un point de vue dynamique et statique. Par conséquent, la transformation doit être classée dans ce type de. déformation de positionnement lorsqu'il est utilisé. À l'intérieur des propriétés statiques.

Transition
La propriété transition est une propriété d'animation simple, très simple et facile à utiliser. On peut dire qu'il s'agit d'une version simplifiée de l'animation, généralement utilisée pour de simples effets spéciaux de pages Web. Par exemple, vous avez les deux styles suivants :

Le code est le suivant :

.position{
    left:100px;
    top:100px;
}
.animate{
    -webkit-transition:left 0.5s ease-out;
    left:500px;
    top:500px;
}

L'attribut de transition d'animate signifie : lorsque votre attribut gauche change, effectuez l'effet d'animation (Basé uniquement sur le changement d'attribut de gauche, les autres attributs ne seront pas ajoutés au changement d'animation);

Tout d'abord, le css de votre élément est la position. Lorsque vous ajoutez animer à sa cssList ou remplacez position par animer, l'attribut de l'élément change et webkit-transition est déclenché. La valeur avant le changement d'attribut spécifié est utilisée comme valeur de départ et l'attribut après le changement est utilisé comme valeur de départ. valeur de fin pour exécuter l’effet d’animation. Il s'agit d'un simple processus de modification en deux points, qui simplifie grandement la complexité de l'attribut d'animation.

En même temps, si la valeur de l'attribut change pendant l'animation de transition, l'exécution de l'animation en cours sera interrompue et la valeur de l'attribut au moment de l'interruption sera fournie à la nouvelle animation comme valeur de départ à calculer le nouvel effet d'animation.

Lors de l'écriture de CSS, comme le seul attribut qui change est la transformation, l'attribut de réponse est spécifié comme all dans l'attribut de transition, qui peut répondre et exécuter l'animation de changement de tous les attributs de l'élément (attributs qui peuvent être animé).

Animation
Introduit dans l'introduction officielle, cet attribut est une extension de l'attribut de transition. Mais cette simple introduction contient quelque chose de pas simple : des images clés.

Quiconque a réalisé de l'animation Flash sait qu'il existe deux armes de base dans Flash : la timeline et les images clés. L'émergence des images clés CSS fournit une collection de ces deux attributs dans le monde flash. Regardez un exemple d'images clés simples :

Le code est le suivant :

@keyframes 'wobble'{
  0%{
   left:100px
}
   30%{
   left:300px;
}
  100%{
   left:500px;
}
}
.animate{
 left:100px;
   -webkit-animation:wobble 0.5s ease-out;
   -webkit-animation-fill-mode:backwards;
}

上面这个代码展示了一个keyframes 'wobble'，其中 0％ 代表在变化中不同时间点的属性值，你可以较精确的控制动画变化中任何一个时间点的属性效果。而animation则根据这个keyframes提供的属性变化方式去计算元素动画当中的属性。与 transition 不同的是，keyframes提供更多的控制，尤其是时间轴的控制，这点让css animation更加强大，使得flash的部分动画效果可以由css直接控制完成，而这一切，仅仅只需要几行代码，也因此诞生了大量（比起flash来说算是大量了）基于css的animation tools，用来取代flash的动画部分。关于动画工具，可以参考Web standards-based Animation Tools.

另外在animation属性里面还有一个最重要的就是：animation-fill-mode，这个属性标示是以(from/0%)指定的样式 还是以(to/100%)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式，保证动画的整体连贯。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!