English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La propiedad de animation-El nombre especificado por la propiedad nameCSS @keyframes debe aplicarse al elemento seleccionado para definir la animación.
La tabla a continuación resume el contexto de uso y el historial de versiones de esta propiedad.
| Valor predeterminado: | none |
|---|---|
| Aplique a: | Todos los elementos::before y::after Elementos pseudo |
| Herencia: | No |
| Animable: | No.Ver Atributo de animación. |
| Versión: | CSS3nueva funcionalidad |
| Sintaxis de JavaScript: | object object.style.animationName="mymove" |
La sintaxis de este atributo es la siguiente:
animación-name: keyframe-name | none | initial | inherit
El siguiente ejemplo muestra cómo usar animation-Atributo name.
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animación-name: moveit;
-webkit-animación-duration: 2s;
animación-name: moveit;
animación-duration: 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}Prueba a ver‹/›La siguiente tabla describe el valor de este atributo.
| Valor | Descripción |
|---|---|
| keyframe-name | Especificar el nombre del keyframe que se debe enlazar al selector. |
| none | Especificar sin animación. Esto se puede usar para sobrescribir o desactivar cualquier animación proveniente del acople. |
| initial | Establecer este atributo en su valor predeterminado. |
| inherit | Si se especifica, el elemento asociado utiliza la animación animation de su elemento padre-Valor calculado del atributo name. |
animación-Compatibilidad del atributo name de navegador, todos los navegadores principales admiten este atributo.
|
Por favor, consulte el siguiente tutorial:CSS3Animación.
Atributos y reglas relacionados:animación,animación-duración,animación-tiempo-función,animación-retraso,animación-iteración-count,animación-dirección,animación-relleno-modo,animación-reproducir-state,@keyframes.