Remarques sur la boîte flexible

(boîte flexible)

animation css

动画属性兼容性，需要写5遍浏览器前缀
浏览器的前缀
-webkit-谷歌浏览器
-o-欧鹏浏览器
-khtml-苹果浏览器
-moz-火狐浏览器
-ms-IE浏览器

Transformer (animation de transition, animation directe)

1. La transformation transforme définit plusieurs effets, en ajoutant des espaces
   (1) translate(x,y,z) traduit la valeur par défaut (axe des x)

translateX(200px)水平移动
translateY()垂直移动
translateZ()前后移动

(2) scale(x,y,z) met à l'échelle tous les axes par défaut.Demandez comment voir que l'axe Z est mis à l'échelle.Veuillez donner un exemple.

  scaleX()缩放宽度
  scaleX()缩放高度
  scaleZ()缩放厚度

Il y a deux paramètres sans unités pour mettre à l'échelle la largeur et la hauteur, qui appartiennent à la mise à l'échelle 2d (vous n'avez pas besoin d'écrire des mots 2d lors de l'écriture du code) et un paramètre est la mise à l'échelle proportionnelle.Trois paramètres scale3d(x,y,z)
peuvent être défini, mise à l'échelle de l'axe Z, mise à l'échelle 3d (3 valeurs, 3d doivent être ajoutés, sinon une erreur sera signalée et la mise à l'échelle de l'axe Z peut être définie séparément) (3) rotation (x, y, z) faire pivoter
le valeur par défaut sur l'axe z (carré, se transforme en losange)

rotateX()水平 
rotateY()垂直 
rotateZ()中心轴

单位：度deg

(4) skew(x,y) twist (cable pull) default x-axis (ne comprend pas)

skewX()水平
skewY()垂直 

	单位：度 deg

(5) matrice (1,0,0,1,0,0) matrice 2d transforme l'ordre de 3*3
valeurs : (largeur de l'échelle torsion de l'axe Y torsion de l'axe X échelle de hauteur mouvement horizontal mouvement vertical) tous n'ont pas besoin écrire des unités

Matrix3d(1,0,0,1,0,0)  //3d变换 4*4  

2. style de transformation : preserve-3d mode 3d ouvert
3. transform-origin : xyz offset point central
   unité : pixel ou pourcentage

animation de transition

transition( 1 2 3 4 ) 4 Le délai peut être omis, et il n'y a pas de délai par défaut.

1. transition-property spécifie le css à animer
2. durée de la transition temps de transition de l'animation
3. fonction de synchronisation de transition type d'animation
   linéaire (vitesse uniforme) aisance linéaire (lente, rapide et lente) aisance douce de lente à rapide atténuation de rapide à lente aisance de lente à rapide puis à lente
4. transition-delay delay time
   unit: seconds s
   Remarque : l'affichage ne prend pas en charge les effets d'animation, tous les attributs ne peuvent pas effectuer les effets d'
   animation

Exemple de délai d'effet de temps d'attribut
 : (après le survol, l'élément tourne et devient plus grand)

.box2:hover div{
    width: 100px;
    height: 100px;
    transform: rotate(360deg);
}
.box2 div:nth-child(1){
    transition: all 5s linear ;
}

animation personnalisée

Animation(帧动画)  

1. animation-name définit le nom de l'animation, qui est le nom de l'animation @keyframes
2. animation-duration unité de temps d'animation : secondes s par défaut 0
3. animation-timing-function Le type d'animation spécifie la courbe de vitesse de l'animation, la valeur par défaut est la facilité
4. animation-delay unité de temps de retard d'animation : seconde : s temps par défaut 0
5. animation–iteration-count spécifie le nombre de fois que l'animation est jouée, la valeur par défaut est 1 boucle infinie infinie
6. animation-direction spécifie si l'animation sera lue dans le sens inverse au cycle suivant (le nombre de cycles est supérieur à 2). La valeur par défaut
   est normal pour jouer dans le sens inverse. L'animation est lue dans le sens inverse. (lecture arrière pour les nombres impairs, lecture avant pour les nombres pairs)
7. animation-play-state état de l'animation (survol de la souris)
   mouvement en cours d'exécution en pause arrêté
8. animation-fill-mode état en dehors du temps d'animation
   aucun ne pas définir la position de départ en arrière la position de fin en avant

effectuer des animations

	@keyframes 名称{
例子：圆球移动轨迹
		方法一（水平）
		form{}
		to{}
		方法二（水平和垂直）
		0%{}
		25{}
		50{}
		100%{}
}