Analyse des différences entre les attributs d'animation, de transformation, de transition et d'animation en CSS3

Cet article présente principalement l'analyse de la différence entre l'attribut de transformation et l'attribut de transition et d'animation en CSS3. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer. 🎜>Récemment dans Les propriétés d'animation en CSS3 sont utilisées dans le projet. Malheureusement, je ne connais pas très bien plusieurs propriétés nouvellement ajoutées de CSS3, et il est souvent facile de se tromper. J'ai donc recherché certaines informations sur le site Web et les ai résumées afin que mes amis dans le besoin puissent s'y référer et apprendre.

TransformDans certains cas de test, chaque fois que l'attribut transform est démontré, il semble être animé. Cela amène un petit nombre de penseurs intuitifs (dont moi) à penser que la propriété de transformation est une propriété 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 concerné par le CSS comme 0,0 (à étudier). 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 le rapport
5 ; . matrice3d, matrice CSS. Grâce à cet attribut matriciel, toutes les valeurs d'attribut ci-dessus sont couvertes, mais j'ai personnellement l'impression 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 :

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

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

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.

Quand j'écrivais CSS, comme le seul attribut changeant était transform, j'ai spécifié l'attribut de réponse 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 peut être animé).

AnimationIntroduit 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 :

@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%)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式，保证动画的整体连贯。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

CSS3中@keyframes动画的实现

关于css属性的选择对动画性能的影响

CSS实现radio和checkbox的 实现效果

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!