Une brève introduction aux transformations et transitions, aux animations et aux propriétés associées en CSS3

1. Transformation

transformation : Vous pouvez faire pivoter, mettre à l'échelle, traduire, incliner et transformer la matrice de l'objet élément.
Exemple :

transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);
/*矩阵变形*/
matrix(<number>,<number>,<number>,<number>,<number>,<number>);
/*透视*/
perspective(length);

transition : attribut de transition

transition : nom de l'attribut css de l'effet de transition durée de l'effet de transition courbe de vitesse de l'heure de début de l'effet de transition ;

transition: property duration timing-function delay;
/*示例*/
transition:1s ease all;
-webkit-tansition:1s ease all;
-moz-transition:1s ease all;
-o-transition:1s ease all;

rotate() : Faites pivoter les éléments dans un espace bidimensionnel.

Si l'élément a une valeur de perspective définie, rotate3d() peut être utilisé pour réaliser une rotation dans un espace tridimensionnel.

rotateX(angele)/*相当于rotate3d(1,0,0,angle)指定在三维空间内的X轴旋转*/
rotateY(angele)/*相当于rotate3d(0,1,0,angle)指定在三维空间内的Y轴旋转*/
rotateZ(angele)/*相当于rotate3d(0,0,1,angle)指定在三维空间内的Z轴旋转*/

scale()

scaleX(<number>)/*只在X轴（水平方向）缩放元素*/
scaleY(<number>)/*只在Y轴（垂直方向）缩放*/
scaleZ(<number>)/*只在Z轴缩放，前提：元素设定透视值*/

translate([,]) : Le mouvement est la quantité de déplacement.

translateX(<translation-value>);/*只在X轴（水平方向）移动*/
translateY(<translation-value>);/*只在Y轴（垂直方向）移动*/
translateZ(<translation-value>);/*只在Z轴移动，前提：元素设置透视值*/

skew() : Skew

skewX(<angle>);/*只在X轴（水平）倾斜*/
skewY(<angle>);/*只在Y轴（垂直）倾斜*/

matrice (a,c,e,b,d,f) : Déformation matricielle, les valeurs de c et e sont représentées par des valeurs sinus ou cosinus.

a : représente scaleX(); mise à l'échelle de l'axe X
c : skewY(); inclinaison de l'axe Y
e : mise à l'échelle de l'axe
d : translationX() 2 . Transition

transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);

transition-property

: propriété de transition

.wrap{
    perspective:1000px; 
}
.wrap .child{
    transform:perspective(1000px);
}

transition-duration : temps de transitiontransition-delay : temps de retard, Quand il. est un nombre négatif, l'action excessive sera affichée à partir de ce moment et l'action précédente sera tronquée. Fonction de synchronisation de transition : effet de transition, facilité par défaut.

3. Animation

transition-property:all;/*针对所有元素都有过度效果*/
transition-property:none;/*没有元素有过度效果*/
transition-property:ident;/*指定css属性有过度效果，例如width*/

animation-name
 : nom de l'animation, doit être utilisé en conjonction avec la règle @keyframes, car le le nom de l'animation est représenté par la définition d'images clés @, si plusieurs valeurs d'attribut sont fournies, séparez-les par des virgules.

transition-timing-function:ease;/*缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔*/
transition-timing-function:linear;/*线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数*/
transition-timing-function:ease-in;/*渐显效果，等同于cubic-bezier(0.42,0,1.0,1.0)函数*/
transition-timing-function:ease-out;/*渐隐效果，等同于cubic-bezier(0,0,0.58,1.0)函数*/
transition-timing-function:ease-in-out;/*渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数*/
transition-timing-function:cubic-bezier;/*特殊的立方贝塞尔曲线效果*/

@keyframes est équivalent à un espace de noms, suivi d'un nom Si le nom de l'animation dans la classe définit le nom correspondant, l'animation peut être exécutée. Lors de la définition d'une animation, vous pouvez utiliser directement les mots-clés from et to pour passer d'un état à un autre.

animation-duration
: temps d'animation

animation-timing-function : méthode de lecture, les valeurs sont les suivantes :

.animation_name{
    left:0;
    top:100px;
    position: absolute;
    -webkit-animation: 0.5s 0.5s ease infinite alternate;
    -moz-animation: 0.5s 0.5s ease infinite alternate;
    -webkit-animation-name:demo;
    -moz-animation-name:demo;
}
@-webkit-keyframes demo{
    from{left:0;}
    to{left:400px;}
}
@-webkit-keyframes demo1{
    0%{left:0;}
    50%{left:200px;}
    100%{left:400px;}
}

facilité : effet de facilité, équivalent à la fonction cubique-bézier (0.25,0.1,0.25,1.0), c'est-à-dire cubique Bézier.

linéaire : effet linéaireease-in : effet de fondu de sortieease-out : effet de fondu de sortie

ease-in-out : effet de fondu de sortie

step-start : sauter maintenant, accédez à l'état final de l'animation step-end : conservez l'état de début de l'animation. Lorsque le temps d'exécution de l'animation est terminé, passez immédiatement à l'état final de l'animation step([,[start | end]]?) : le numéro du premier paramètre est le nombre d'intervalles spécifié, c'est-à-dire que l'animation est divisée en n étapes pour un affichage progressif. Le deuxième paramètre est par défaut end, ce qui définit l'état de la dernière étape, le début est l'état à la fin, et la fin est. l'état au début. Si défini avec animation- L'effet des conflits de mode de remplissage et le paramètre animation-fill-mode est l'état final de l'animation.

cubic-bezier(,,,) : effet spécial de courbe de zebel cubique

animation-delay
 : démarrer le temps de lecture


animation-iteration -count
 : Le nombre de fois de lecture. Lorsque la valeur est infinie, cela signifie une lecture en boucle infinie.

animation-direction : La valeur est : <.>normal : direction normale

inverse : l'animation s'exécute dans le sens inverse et la direction est toujours similaire à la normale

alternative : l'animation avancera et inversera alternativement le mouvement

animation-fill-mode

 : L'état après la lecture, Valeur : aucun : Valeur par défaut, non définie

forwards : Conserver l'état où l'animation se termine après la fin

backwards : Retour à l'état où l'animation commence après la fin
les deux : peuvent être suivis après la fin Deux règles pour l'avant et l'arrière
animation-play-state : Récupère ou définit l'état de l'animation de l'objet, valeur :

running: default, motion

paused: paused

Quatre,Attributs associés

transform-origin
: origine de la transformation, point de référence de la transformation , la valeur par défaut est le point central de l'élément. Il y a deux paramètres, le premier paramètre est l'abscisse et le paramètre deux est l'ordonnée.

pourcentage : Spécifiez la valeur de la coordonnée en pourcentage, peut être négative

longueur : Spécifiez la valeur de la coordonnée en longueur, peut être négative

gauche centre droite : prenez la valeur dans le sens horizontal en haut au centre en bas : prendre la valeur dans le sens vertical Valeur

perspective-prigin : origine de la perspective, définie sur l'axe X et l'axe Y de l'élément 3D, permettant de changer la position inférieure de l'élément 3D. Lorsque cet attribut est défini, il s'agit d'un enfant d'un élément. L'élément, la perspective, pas l'élément lui-même. Remarque : cet attribut doit être utilisé avec l'attribut perspective, qui n'affecte que les éléments transformés en 3D.

Valeurs : pourcentage, longueur, gauche, centre, droite, haut, centre, bas

backface-visibility
: Masquer le dos du contenu, le dos est visible par défaut, inversé Le contenu après la transformation est toujours visible Lorsque la visibilité de la face arrière est définie sur masquée, le contenu sera masqué après la rotation et la face avant ne sera plus visible après la rotation.

Valeurs : visible, cachée

transform-style : rendu 3D, définit la manière dont les éléments incorporés sont rendus dans l'espace 3D. Il existe deux valeurs : flat : tous les éléments enfants sont rendus dans un plan 2D. préserver-3d : Préserver l'espace 3D

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!