Tanto la deformación como la animación son una forma de mejorar la experiencia del usuario en el proceso de desarrollo front-end. Agregar algo de animación puede hacer que la página se vea menos aburrida.
1. Transformación de deformación
El atributo transform aplica una transformación 2D o 3D al elemento. Esta propiedad le permite rotar, escalar, mover, sesgar, etc. el elemento.
La deformación es una transformación relativa a su propia posición original, y la posición original aún ocupa un lugar, que es solo un cambio visual. Este punto de vista es algo similar al posicionamiento relativo.
1.1 deformación 2D
Sistema de coordenadas en 2d: x indica dirección positiva hacia la derecha y indica dirección positiva hacia abajo
-
translate(x,y) offset , función de valor, los dos parámetros son el desplazamiento en la dirección x y la dirección y; si solo hay un valor, significa el desplazamiento en x
translateX (x)Desplazamiento en dirección X Desplazamiento
translateY (y)en dirección Y/* 向下偏移100px */ /* transform: translateY(100px); */ /* 向右偏移200px*/ /* transform: translateX(200px); */ /* 同时设置向下偏移100px向右偏移200px */ /* transform: translate(200px,100px) */ transform: translate(100px); -
scale(x,y) scaling , los dos parámetros son los valores de escala en la dirección x y la dirección y respectivamente; si solo hay un valor, representa el valor de escala en ambas direcciones del elemento
scaleX(x)Escala en dirección XscaleY(y)Escala en la dirección Y/* x方向缩小一半 */ /* transform: scaleX(0.5); */ /* y方向变大一半 */ /* transform: scaleY(2); */ /* 设置x、y方向的缩放值 */ /* transform: scale(0.9,0.5); */ transform: scale(0.5); -
skew(x deg, y deg); skew , define una transformación de sesgo 2D a lo largo de los ejes X e Y
skewX()skewY()/* x方向倾斜30deg */ /* transform: skewX(30deg); */ /* y方向倾斜30deg */ /* transform: skewY(60deg); */ transform: skewX(30deg); -
rotar (grados z) Rotar Define una rotación 2D, especificando el ángulo en el parámetro
rotateX() x轴旋转rotateY() y轴旋转rotateZ() z旋转，平面旋转/* x轴旋转30deg */ /* transform: rotateX(30deg); */ /* y轴旋转30deg */ /* transform: rotateY(60deg); */ transform: rotateZ(60deg)
1.2 Cambiar el punto central de deformación
El atributo transform-origin le permite cambiar la posición del elemento transformado
transform-origin: x-axis y-axis z-axis;
- El eje x define dónde se coloca la vista en el eje x. Valores posibles: izquierda centro derecha porcentaje de valor fijo
- El eje y define dónde se coloca la vista en el eje y. Valores posibles: superior centro inferior valor fijo porcentaje
- El eje z define dónde se coloca la vista en el eje Z. Valores posibles: valor fijo
Nota: Los elementos de transformación 2D pueden cambiar los ejes X e Y del elemento. Transforme elementos en 3D y también cambie el eje Z del elemento.
1.3 Cambiar el tipo de deformación
El atributo de estilo de transformación especifica cómo se presentan los elementos anidados en el espacio tridimensional, la deformación 2D y la deformación 3D, y los valores del atributo son los siguientes
- plano significa que todos los elementos secundarios se representan en un plano 2D
- preserve-3d significa que todos los elementos secundarios se renderizan en un espacio 3D
1.4 Propiedades y valores de propiedad relacionados con la deformación 3D
Sistema de coordenadas en 3d: x significa dirección positiva hacia la derecha y significa dirección positiva hacia abajo z significa vertical a la pantalla
perspectiveProfundidad de campo, que indica a cuántos píxeles de distancia de la pantallatranslate3d(x,y,z)translateZ(z)La propiedad indica cuántos píxeles se ha movido el elemento a lo largo de su propio eje ZscaleZ(z deg)
Nota: la deformación 3d debe usarse con la profundidad de campo, y el atributo de perspectiva se agrega al elemento principal
父元素{
prespective: 101px; // 表示父元素距离屏幕101px的距离，类似于看戏时确定舞台的距离
}
子元素{
transform: translateZ(100px); // 表示子元素从距离屏幕101px的位置，移动到了距离屏幕1px的位置
}
1.5 Parte trasera no visible
backface-visibility : visible(默认，背面可见) | hidden(背面不可见);
En segundo lugar, la transición de transición
La transición es la evolución de un efecto a otro, lo que requiere condiciones de activación, tales como: pase el mouse para obtener el evento de clic de enfoque, etc.
Dos condiciones necesarias:
Propiedad de transición propiedad-de-transición
Tiempo de transición transición-duración
Además de las dos propiedades anteriores:
Curva de acción de transición función de temporización de transición
Retraso de transición retraso de transición
Tres, animación animación
La animación también cambia de un efecto a otro, esto no requiere ninguna condición de activación y se reproduce automáticamente;
Dos condiciones necesarias :
animation-name el nombre de la animación
animation-duration tiempo de transición de la animación
Otros atributos :
animación-retraso animación retraso tiempo de reproducción
velocidad de reproducción de la animación de la función de tiempo de animación, el valor de la propiedad es el mismo que el de la función de tiempo de transición
animation-iteration-count Establece el número de veces que se reproduce la animación; puedes dar un número, si se establece en infinito, significa reproducción infinita
animation-direction Establece la dirección de reproducción de la animación, los valores de propiedad son los siguientes:
Reproducción hacia adelante normal
juego inverso al revés
Número impar alternativo de juego hacia adelante, número par de juego hacia atrás
número par alternativo-inverso de juego hacia adelante, número impar de juego hacia atrás
El atributo animation-fill-mode especifica que cuando la animación no se está reproduciendo (cuando la animación está completa, o cuando la animación tiene un retraso antes de comenzar), el valor del atributo de estilo que se reenvía para aplicarse al elemento retiene el efecto del último cuadro de la animacion
Reglas del conjunto de animación :
@keyframes name{
from{}
to{}
}
Nota: Debido a que hay muy pocos efectos de forma... a transición, generalmente usaremos porcentajes de 0%, 10%, ..., 90%, 100% para presentar un proceso de animación más delicado.
@keyframes name{
0%{}
10%{}
...
90%{}
100%{}
}
Propiedades abreviadas de animación
animation:name duration delay timing-function iteration-count direction;
Controlar el estado de reproducción de la animación.
animation-play-state: running (默认运动) | paused (停止) ;
Tales como: configure el mouse para que se deslice sobre el contenedor para detener la reproducción de la animación