Propriedade CSS animation-name
Use a propriedade animation-name para especificar nomes de animações definidas por regras @keyframes. Veja exemplos práticos.
A propriedade animation-name nomeia uma ou mais animações @keyframes a serem aplicadas a um elemento. O valor é o identificador que você atribuiu a uma regra @keyframes — o nome é o que vincula o elemento à sua animação. Sem animation-name, o navegador não tem keyframes para executar, portanto nada anima mesmo que você defina uma duração.
Esta propriedade apenas aponta para a animação; ela não a inicia sozinha. Você ainda precisa de um animation-duration diferente de zero para que os keyframes sejam reproduzidos. animation-name é uma das propriedades do CSS3.
Na prática, raramente se escreve animation-name diretamente — o shorthand animation define o nome, duração, função de temporização, atraso, contagem de iterações, direção e mais em uma única declaração. Use a propriedade individual quando quiser substituir apenas o nome (por exemplo, trocar os keyframes no hover mantendo o mesmo timing).
Quando usar
- Reutilizar um conjunto de keyframes em vários elementos com durações ou atrasos diferentes, definindo
animation-nameuma vez e variando as outras propriedades individuais. - Alternar animações conforme o estado — atribuir a um elemento um nome normalmente e um nome diferente no
:hoverou ao alternar uma classe. - Executar várias animações ao mesmo tempo no mesmo elemento listando nomes separados por vírgula (veja Múltiplas animações abaixo).
Regras de nomenclatura
Um nome de keyframes é um identificador CSS, portanto as mesmas regras se aplicam:
- É sensível a maiúsculas e minúsculas:
Slideeslidesão nomes diferentes. - Pode conter letras, dígitos, hífens e underscores, mas não pode começar com um dígito.
- Evite as palavras-chave globais do CSS
none,initial,inheriteunsetcomo nomes de animação —animation-name: noneé interpretado como "sem animação", não como um bloco de keyframes literalmente chamadonone.
| Valor Inicial | none |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica aos pseudoelementos ::before e ::after. |
| Herdado | Não. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.animationName = "element"; |
Sintaxe
Sintaxe da propriedade CSS animation-name
animation-name: keyframename | none | initial | inherit;Você pode fornecer mais de um nome, separados por vírgulas, para aplicar várias animações ao mesmo elemento:
animation-name: slide, fade;Exemplo da propriedade animation-name
Exemplo da propriedade CSS animation-name
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 50px;
animation-name: element;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes element {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #d5dce8;
}
}
</style>
</head>
<body>
<h2>Animation-name example</h2>
<div>The name of the animation is set as "element".</div>
</body>
</html>No exemplo dado, o nome da animação é definido como "element". Você pode escolher qualquer nome, desde que exista uma regra @keyframes element correspondente. Se o nome não tiver uma regra @keyframes correspondente, a declaração é simplesmente ignorada e nada anima.
Múltiplas animações
Ao listar vários nomes, cada um mapeia posicionalmente para os valores das outras propriedades individuais de animação. Aqui slide recebe 2s/ease-out e fade recebe 4s/linear:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
padding: 20px;
background: #1c87c9;
color: #fff;
animation-name: slide, fade;
animation-duration: 2s, 4s;
animation-timing-function: ease-out, linear;
animation-iteration-count: infinite;
}
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(150px); }
}
@keyframes fade {
from { opacity: 1; }
to { opacity: 0.2; }
}
</style>
</head>
<body>
<div>Sliding and fading at the same time.</div>
</body>
</html>Se você fornecer menos valores para outra propriedade do que há nomes, os valores se repetem para cobrir cada nome. Para um controle mais preciso sobre o restante da animação, consulte animation-delay e animation-direction.
Valores
| Valor | Descrição |
|---|---|
| none | Este é o valor padrão. Especifica que não haverá animação. |
| keyframename | Especifica o nome da animação. |
| initial | Faz a propriedade usar seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |