Comparaison complète des attributs liés à l'animation CSS3, transition, animation et transformation

La transition, l'animation et la transformation sont parfois floues. Cet article présente principalement la comparaison des propriétés de transition, d'animation et de transformation de CSS3 liées à l'animation, les similitudes et les différences entre elles sont plus nombreuses. profondément démontré. Vous pouvez consulter l'explication détaillée ci-dessous pour les étapes de fonctionnement spécifiques. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Compatibilité des navigateurs

Propriété de transformation CSS3

Internet Explorer 10, Firefox et Opera prennent en charge l'attribut transform.

Internet Explorer 9 prend en charge un attribut alternatif -ms-transform (pour les transformations 2D uniquement).

Safari et Chrome prennent en charge les propriétés alternatives -webkit-transform (transformations 3D et 2D).

Opera ne prend en charge que la conversion 2D.

transform:rotate(7deg);
-ms-transform:rotate(7deg);     /* IE 9 */
-moz-transform:rotate(7deg);     /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg);     /* Opera */

Propriété d'animation CSS3

Internet Explorer 10. Firefox et Opera prennent en charge l'attribut d'animation.

Safari et Chrome prennent en charge un attribut alternatif -webkit-animation.

Remarque : Internet Explorer 9 et versions antérieures ne prennent pas en charge la propriété d'animation.

Utilisation :

animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */

Propriété de transition CSS3

Internet Explorer 10, Firefox, Opera et Chrome prennent en charge l'attribut de transition.

Safari prend en charge un attribut alternatif -webkit-transition.

Remarque : Internet Explorer 9 et les navigateurs antérieurs ne prennent pas en charge l'attribut de transition.

Utilisation :

transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s;

Autres comparaisons

transition et l'animation appartiennent aux propriétés d'animation et la transformation appartient aux propriétés statiques.
Selon la compréhension des mots anglais : conversion, transformation, transformation fait principalement référence à la conversion du déplacement, de la taille, de la position et de la forme. Si vous écrivez directement la transformation d'attribut, vous obtiendrez la forme et la position transformées.
La transition et l'animation sont toutes deux des propriétés d'animation, elles ont donc toutes les deux les propriétés suivantes
property
duration
timing-function
delay

 : durée d'animation, forme d'animation, délai time Pour l'animation, la propriété devient le nom de l'animation. Les propriétés uniques de l'animation sont :

animation-iteration-count
animation-direction
La première consiste à définir le nombre de fois l'animation. est joué, et l'autre est de définir si l'animation est jouée à l'envers à tour de rôle

Comparaison des formes abrégées :

attribut de transition : transition, c'est-à-dire transition. , la transition du processus de changement CSS, donc la signification de la définition de l'attribut de transition est, une fois défini, si les propriétés de la transition changent, elles seront transformées en fonction de l'animation de la transition, plutôt qu'une transformation directe rigide que cela fournit. un bon moyen pour l'animation. Généralement, nous écrivons :
-webkit-transition:all 0.85s easy-in 0.1s;
-o-transition:all 0.85s easy-in 0.1s;
-moz-transition:all 0.85s easy -en 0,1 s;
transition : tous 0,85 s facilité-en 0,1 s;
tout signifie que les changements dans tous les attributs seront modifiés en fonction de cette transition
méthode d'écriture d'animation :
-webkit-animation : tang1 0,5s facilité 0s infini alternatif ;
animation : tang1 0,5s facilité 0s infini alternatif ; nous devons donc ici d'abord définir comment l'animation se transforme :

@keyframes tang1
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes tang1 /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}

En raison de la compatibilité du navigateur, cela doit également être écrit lors de la définition de l'animation.

de représente 0 % du temps, à représente 100 % du temps.

Recommandations associées :

Exemple d'analyse de l'attribut de transition en CSS3

La transition comprend principalement une introduction à quatre valeurs d'attribut

Tutoriel sur l'utilisation de l'animation en CSS

Comparez les différences et les liens entre transition et animation en CSS3

CSS3 Introduction détaillée sur la transformation dans

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!