Propriedade CSS animation-name
Use a propriedade animation-name para especificar um ou mais nomes de animações definidas por regras @keyframes. Experimente o exemplo da propriedade animation-name.
A propriedade animation-name especifica um ou mais nomes de animações definidas pela regra @keyframes que devem ser aplicadas ao elemento selecionado. Quando são especificados vários valores separados por vírgula para qualquer propriedade de animação, estes serão associados de forma diferente às animações definidas em animation-name.
A propriedade animation-name é uma das propriedades CSS3.
A propriedade abreviada (shorthand) animation pode ser utilizada para definir todas as propriedades da animação de uma só vez. Diferentes propriedades de animação podem controlar a animação. Podem especificar o tempo de iteração da animação, se a animação deve estar a ser reproduzida ou em pausa e se alterna entre os valores. O tempo de início da animação também pode ser atrasado.
| Valor inicial | none |
|---|---|
| Aplica-se a | Todos os elementos. Aplica-se também aos pseudo-elementos ::before e ::after. |
| Herdada | 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;Exemplo da propriedade animation-name:
Exemplo da propriedade CSS animation-name
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 50px;
animation: element 4s 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 está definido como "element". Pode escolher qualquer nome que pretenda.
Valores
| Valor | Descrição |
|---|---|
| none | É o valor predefinido. Especifica que não haverá qualquer animação |
| keyframename | Especifica o nome da animação. |
| initial | Faz com que a propriedade utilize o seu valor predefinido. |
| inherit | Herda a propriedade do seu elemento pai. |