Manual de referencia CSS

Reglas CSS @

大全 de Atributos CSS

CSS3 animación-iteración-Atributo count CSS3 animación-Atributo duration

CSS3 animación-relleno-Uso y ejemplo de la propiedad mode

CSS3 animación-relleno-La propiedad mode especifica cómo se aplica el estilo al objetivo de la animación de CSS antes y después de su ejecución.

La siguiente tabla resume el contexto de uso y el historial de versiones de esta propiedad.

Valor predeterminado:	ninguno
Aplicable a:	Todos los elementos::before y::after Elementos pseudo
Heredado:	Ninguno
Animable:	No.Consulte: Atributos de animación.
Versión:	CSS3nueva característica
Sintaxis de JavaScript:	object.style.animationFillMode="forwards"

animación-relleno-Uso de la sintaxis de modo

La sintaxis de esta propiedad es la siguiente:

animación-relleno-modo: ninguno | forwards | backwards | ambos | inicial | heredado

El siguiente ejemplo muestra cómo usar animation-relleno-Atributo mode.

Ejemplo

.box {
　　　　width:　50px;
　　　　height:　50px;
　　　　background: red;
　　　　position: relative;
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-animación-name: moveit;
　　　　-webkit-animación-duration:　4s;
　　　　-webkit-animación-relleno-mode: forwards;
　　　　
　　　　animación-name: moveit;
　　　　animación-duration:　4s;
　　　　animación-relleno-mode: forwards;
}
　
/*　Chrome, Safari, Opera　*/
@-webkit-keyframes moveit {
　　　　from {left: 0;}
　　　　to {left:　50%;}
}
　
@keyframes moveit {
　　　　from {left: 0;}
　　　　to {left:　50%;}
}

Prueba a ver‹/›

Valor del atributo

La tabla a continuación describe los valores de este atributo.

Valor	Descripción
ninguno	La animación no aplicará ningún estilo al objetivo antes o después de su ejecución.
hacia adelante	Después de que la animación finalice（poranimación-iteración-count），la animación aplicará los valores de las propiedades al final de la animación。
hacia atrás	La animación aplicará los valores de las propiedades definidas en los cuadros clave, que serán determinados poranimación-retrasoLa primera iteración de la animación comienza en el período de tiempo definido por el atributo, estos son los valores del cuadro clave from（animación-direcciónpara normal o al alternar）o al valor de la clave de cuadro (animación-direcciónpara inverso o al alternar-inverso）。
ambos	La animación seguirá las reglas hacia adelante y hacia atrás, expandiendo así las propiedades de animación en ambas direcciones.
inicial	Establecer este atributo en su valor predeterminado.
heredar	Si se especifica, el elemento relacionado utiliza su animation del elemento padre-relleno-Valor de cálculo del atributo mode.

Compatibilidad del navegador

animación-relleno-Compatibilidad del atributo mode del navegador, todos los navegadores principales admiten este atributo.

	Firefox 5+ ^-moz-,15 + Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 12+ ^-o-,15+ ^-webkit-

Leer más

Consulte los siguientes tutoriales:CSS3Animación.

Atributos y reglas relacionados: 　 animación,animación-nombre,animación-duración,animación-tiempo-función,animación-retraso,animación-iteración-count,animación-dirección,animación-reproducir-estado,@keyframes.

CSS3 animación-iteración-Atributo count CSS3 animación-Atributo duration