propriedades CSS, como color, background-color, heightou width. Cada animação precisa ser definida com a @keyframes regra que é então chamada com a animationpropriedade, assim:

.element {
 animation: pulse 5s infinite;
}

@keyframes pulse {
 0% {
 background-color: #001F3F;
 }
 100% {
 background-color: #FF4136;
 }
}

Cada @keyframesregra define o que deve acontecer em momentos específicos durante a animação. Por exemplo, 0% é o início da animação e 100% é o fim. animationEsses quadros-chave podem ser controlados pela propriedade abreviada ou por suas oito subpropriedades, para dar mais controle sobre como esses quadros-chave devem ser manipulados.

Subpropriedades
animation-name: declara o nome da @keyframesregra a ser manipulada.
animation-duration: o tempo que leva para uma animação completar um ciclo.
animation-timing-function: estabelece curvas de aceleração predefinidas como easeou linear.
animation-delay: o tempo entre o carregamento do elemento e o início da sequência de animação ( exemplos legais ).
animation-direction: define a direção da animação após o ciclo. Seu padrão é redefinido em cada ciclo.
animation-iteration-count: o número de vezes que a animação deve ser executada.
animation-fill-mode: define quais valores são aplicados antes/depois da animação.
Por exemplo, você pode definir o último estado da animação para permanecer na tela ou pode defini-lo para voltar para antes do início da animação.
animation-play-state: pausa/reproduz a animação.
Essas subpropriedades podem ser usadas assim:

@keyframes stretch {
 /* declare animation actions here */
}

.element {
 animation-name: stretch;
 animation-duration: 1.5s; 
 animation-timing-function: ease-out; 
 animation-delay: 0s;
 animation-direction: alternate;
 animation-iteration-count: infinite;
 animation-fill-mode: none;
 animation-play-state: running; 
}

/*
is the same as:
*/

.element {
 animation: 
 stretch
 1.5s
 ease-out
 0s
 alternate
 infinite
 none
 running;
}

Aqui está uma lista completa de quais valores cada uma dessas subpropriedades pode assumir:

animation-timing-function
facilidade, facilidade de saída, facilidade de entrada, facilidade de entrada, linear, cúbico-bezier(x1, y1, x2, y2) (por exemplo, cúbico-bezier(0,5, 0,2, 0,3, 1,0))
animation-duration
Xs ou Xms
animation-delay
Xs ou Xms
animation-iteration-count
X
animation-fill-mode
para a frente, para trás, ambos, nenhum
animation-direction
normal, alternado
animation-play-state
pausado, correndo, correndo
Várias etapas
Se uma animação tiver as mesmas propriedades inicial e final, é útil separar os valores 0% e 100% dentro de @keyframes:

@keyframes pulse {
 0%, 100% {
 background-color: yellow;
 }
 50% {
 background-color: red;
 }
}

Várias animações
Você também pode separar os valores por vírgulas para declarar várias animações em um seletor. No exemplo abaixo, queremos mudar a cor do círculo @keyframeenquanto também o empurramos de um lado para o outro com o outro.