1. Home
  2. CSS Animación

El mejor tutorial de CSS Animación en 2024. En este tutorial podrás aprender Definición y Uso,Soporte para el navegador,Ejemplos,las propiedades de animación,

CSS Animación

Definición y Uso

Algunas propiedades CSS se pueden animar, lo que significa que se pueden utilizar para las animaciones y transiciones.

las propiedades de animación se pueden cambiar gradualmente de un valor a otro, como el tamaño, el número y porcentaje de color.

Soporte para el navegador

Las cifras de la tabla representan el primer navegador compatible con el número de versión del método.

Inmediatamente después del número -webkit-, -moz-, o -o- especifica el primer navegador que soporta esta versión atributo prefijo.

4.0 -webkit- 10.0 16.0
5.0 -moz- 		4.0 -webkit- 15.0 -webkit-
12.1
12.0 -o-

Ejemplos

El color de fondo cambia gradualmente de rojo a azul:

@keyframes mymove
{
from {background-color:red;}
to {left:blue;}
}

/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}

Trate »

las propiedades de animación

las propiedades de animación CSS:

propiedad Ejemplos
fondo Intenta "
background-color Intenta "
background-position Intenta "
fondo de tamaño Intenta "
frontera Intenta "
border-bottom Intenta "
border-bottom-color de Intenta "
border-bottom-izquierda-radio Intenta "
border-bottom-derecha-radio Intenta "
border-bottom-ancho Intenta "
border-color Intenta "
border-left Intenta "
border-left-color de Intenta "
border-left-ancho Intenta "
border-right Intenta "
border-right-color de Intenta "
border-right-ancho Intenta "
espaciado de borde Intenta "
border-top Intenta "
border-top-color de Intenta "
border-top-izquierda-radio Intenta "
border-top-derecha-radio Intenta "
border-top-ancho Intenta "
fondo Intenta "
box-shadow Intenta "
presilla Intenta "
color Intenta "
la columna de recuento Intenta "
la columna de diferencia Intenta "
columna en reglas Intenta "
columna de regla de color Intenta "
columna en reglas de ancho Intenta "
columna de ancho Intenta "
columnas Intenta "
filtro Intenta "
flexible
flex-base Intenta "
flexionar a crecer Intenta "
flex-retráctil Intenta "
fuente Intenta "
font-size Intenta "
font-size-adjust
font-stretch
font-weight Intenta "
altura Intenta "
izquierda Intenta "
espaciado entre letras Intenta "
line-height Intenta "
margen Intenta "
margin-bottom Intenta "
margin-left Intenta "
margin-right Intenta "
margin-top Intenta "
max-height Intenta "
de ancho máximo Intenta "
min-height Intenta "
min-width Intenta "
opacidad Intenta "
orden Intenta "
contorno Intenta "
contorno color Intenta "
esbozar-offset Intenta "
esbozo de ancho Intenta "
acolchado Intenta "
padding-bottom Intenta "
padding-left Intenta "
padding-right Intenta "
padding-top Intenta "
perspectiva Intenta "
perspectiva origen Intenta "
derecho Intenta "
text-decoration color Intenta "
texto-guión Intenta "
text-shadow Intenta "
top Intenta "
transformar Intenta "
transformar origen Intenta "
vertical-align Intenta "
visibilidad
ancho Intenta "
word-spacing Intenta "
z-index Intenta "

Hot Tutorials

Contact US

CSS Animación
10/30