Propiedades relacionadas con la animación css3

Propiedades relacionadas con la animación css3

Animación de transición

Definición: la transformación de ciertos atributos de un elemento de un estado a otro

ancho: 200px —-> ancho: 400px

transición: curva de movimiento de tiempo de la duración de la propiedad que se retrasará;
transición: ancho 1s 0s
curva de movimiento lineal :
velocidad uniforme lineal
de rápido a lento facilidad valor predeterminado
de lento a rápido a lento entrada-salida

Transición de valor múltiple

transition:bgackground-color  1s  linear, width 1s linear ,height 1s linear;

transition:all 1s linear;  all关键字是浏览器自动设置所有触发的属性的过渡

Animación de deformación

Deformación 2D

transformar: tipo de deformación;

Traducir

transform:translate(x,y);
x:水平平移  +x 水平向右平移  -x水平向左平移
y:垂直平移  +y 垂直向下平移  -y垂直向上平移

Rotar

顺时针:+角度  deg度数 
transform:rotate(45deg);

逆时针:-角度 
transform:rotate(-45deg)

Establecer punto central de rotación

El centro de deformación predeterminado de la deformación 2D es el punto central de la caja de origen de transformación: 50% 50% / centro centro;

transform-origin:xpx ypx / % % /right center left top bottom

Escala

transform:scale(m,n);  m代表宽度缩放倍数  n代高度的缩放倍数
m=0.5 宽度缩小为原来的一半(0.5倍)
m=2  宽度放大到原来的2倍   >1放大  <1缩小

Inclinación sesgada

transform:skew(x,y);  +deg向坐标轴的正方向的反方向倾斜  -deg 向坐标轴的正方向倾斜
x代表水平方向切斜的度数
y代表垂直方向倾斜的度数

Deformación 3d

Animación de fotogramas clave

1. Definir animación

@keyframes 动画名 {
//动画有几个关键状态  2个关键状态 from{}to{}
//动画有多个关键帧 n个
	0% {
	} 20% {
	} 50% {
	} 75% {
	} 100% {
	}

}

2. Usa animación

animación: si el nombre de la animación dura un tiempo de retardo, si el número de ejecuciones de la curva de movimiento es de ida y vuelta, el estado de la animación después de que se completa el último fotograma.

Nombre de la animación: animación-propiedad: movimiento;
tiempo de duración animación-duración: 5s;
tiempo de retraso animación-retraso: 2s;
curva de movimiento animación-sincronización-función: lineal uniforme velocidad / facilidad lenta (predeterminado) / facilidad /
conteo de iteración de animación de entrada y salida : 2 / infinitas veces ilimitadas
Si el movimiento de ida y vuelta de la dirección de animación: normal es normal / alternativo invierte
el estado después de completar el último fotograma Mantener el estado inicial del último fotograma / palabras clave (predeterminado);
animation-play-state: running / paused;