Attributs CSS3 transition, animation, transformation

Cette fois, je vais vous présenter les attributstransition, animation et transformation CSS3 Quelles sont les précautions lors de l'utilisation des attributs CSS3 transition, animation et transformation. cas pratiques. Levez-vous et jetez un œil.

Récemment, en réponse aux besoins de l'entreprise, j'ai eu besoin d'utiliser CSS3 pour créer des animations J'ai enfin compris les trois attributs qui m'avaient dérouté auparavant.

Faites simplement ici une simple comparaison pour approfondir votre mémoire.

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

D'autres comparaisons

la transition et l'animation appartiennent Attributs d'animation, la transformation appartient à l'attribut static.
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
Une pour définir le. nombre de fois que l'animation est jouée. , une comparaison courte pour définir si les animations sont lues à l'envers à tour de rôle

 :

attribut de transition : la transition, c'est-à-dire la transition du processus de changement CSS, définissez donc l'attribut de transition. Le sens est que lorsque l'attribut de transition est défini et change, il sera transformé en fonction de l'animation de cette transition, plutôt qu'une transformation directe rigide, qui fournit un bon moyen pour 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 -in 0.1s;
transition:all 0.85s easy-in 0.1s;
all signifie que les changements dans tous les attributs seront modifiés en fonction de cette transition
écriture de l'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;}
}

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :

Comment créer une ligne de 0,5 pixel en CSS

Implémentation de la barre de menu de transition en douceur de la transition CSS3

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!