English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS3 animation-timing-O atributo function especifica como a animação CSS deve ser executada durante o tempo de cada ciclo.
A tabela a seguir resume o contexto de uso e histórico de versões deste atributo.
| Valor padrão: | ease |
|---|---|
| Aplicável a: | Todos os elementos::before e::after Elemento pseudo |
| Herança: | Nenhum |
| Animável: | Não.Veja também Atributo de animação。 |
| Versão: | CSS3nova funcionalidade |
| Sintaxe JavaScript: | object object.style.animationTimingFunction="linear" |
A sintaxe deste atributo é a seguinte:
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit
O exemplo a seguir demonstra como usar animation-timing-Atributo function.
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease-in;
animation-name: moveit;
animation-duration: 2s;
animation-timing-function: ease-in;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}Teste e veja‹/›A tabela a seguir descreve os valores dessa propriedade.
| Valor | Descrição |
|---|---|
| linear | Especifique que a animação comece a constante velocidade desde o estado inicial até o estado final. |
| ease | Semelhante ao fade in e fade out, embora acelere mais rapidamente no início e comece a desacelerar perto do meio. |
| ease-in | Especifique que a animação comece lentamente, acelere gradualmente até atingir o estado final e então pare abruptamente. |
| ease-out | Especifique que a animação comece rapidamente e, quando se aproximar do estado final, diminua gradualmente. |
| ease-in-out | Especifique que a animação comece lentamente, acelere e depois desacelere quando se aproximar do estado final. |
cubic-bezier(n,n,n,n) | Defina uma curva de Bézier de terceiro grau. Também conhecida como curva de velocidade. Os valores possíveis são de 0 a1os valores entre |
| initial | Defina essa propriedade para seu valor padrão. |
| inherit | Se especificado, o elemento relacionado usa a animação do elemento pai.-timing-Valor de cálculo do atributo function. |
animation-timing-Compatibilidade do navegador do atributo function, todos os navegadores populares suportam essa propriedade.
|
Por favor, consulte o seguinte tutorial:CSS3Animação。
Atributos e regras relacionados:animation，animation-name，animation-duration，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode，animation-play-state，@keyframes。