1. Home
  2. CSS3 @keyframes reglas

El mejor tutorial de CSS3 @keyframes reglas en 2024. En este tutorial podrás aprender Ejemplos,Soporte para el navegador,definiciones de código e instrucciones,gramática,ejemplos en línea,Ejemplos,Ejemplos,Ejemplos,Artículos relacionados,

CSS3 @keyframes reglas

Ejemplos

Hacer un elemento div se mueve gradualmente 200 píxeles:

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

Trate »
En la parte inferior de esta página para más ejemplos.

Soporte para el navegador

属性
@keyframes 43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-

definiciones de código e instrucciones

Utilice reglas @keyframes, puede crear la animación.

La creación de animación cambiando gradualmente la configuración de un estilo CSS a otro.

Durante la animación, puede cambiar los tiempos de seleccionar el estilo CSS.

Uso ocurre cuando un cambio especificado en%, o palabra clave "de" y "a", y este es el 0% y el 100% idénticos.

0% es el comienzo de la animación, 100% cuando la animación se ha completado.

Para un apoyo óptimo del navegador, que siempre debe ser definido como el 0% y el 100% del selector.

Nota: Utilice lapropiedaddeanimación para controlar la apariencia de la animación también se utiliza para seleccionar la animación se unen. .

gramática

@keyframesanimationname {keyframes-selector {css-styles;}}

valor explicación
animationname Requerido. Definir el nombre de la animación.
fotogramas clave selector Requerido. La duración porcentaje de la animación.

Valor jurídico:

0-100%
a partir de (y 0% idéntica)
a (y 100% idéntica)

Nota: Puede utilizar una animación de fotogramas clave-selectores.

CSS-estilos Requerido. Uno o más atributos legítimos de estilo CSS

Ejemplos

ejemplos en línea


Ejemplos

Muchos de los selector de llave marco para añadir una película:

@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}

Trate »

Ejemplos

Cambiar muchos estilos CSS en una animación:

@keyframes mymove
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

Trate »

Ejemplos

Muchos selectores de fotogramas clave con gran variedad de estilos CSS:

@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

Trate »

Artículos relacionados

CSS3 Tutorial: Animación CSS3

Hot Tutorials

Contact US

CSS3 @keyframes reglas
10/30