1. Keyframes Tanımlama:

   @keyframes

   kuralı kullanılarak animasyonun her bir aşaması için keyframes tanımlanır 13. Bu kural, animasyonun adını ve stillerin zaman içindeki değişimini içerir 3.
2. Elemente Animasyonu Bağlama: Animasyon,

   animation

   özelliği ile bir elemente bağlanır 13. Bu özellik, animasyonun adını, süresini, gecikme süresini, tekrar sayısını ve diğer ayarları içerir 13.

/* Keyframes */
@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}

/* Elemente Animasyonu Bağlama */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
Kopyala

• animation-direction

  : Animasyonun ileri, geri veya alternatif döngülerde oynatılmasını belirtir 1.

• animation-timing-function

  : Animasyonun hız eğrisini tanımlar (örneğin,

  ease

  ,

  linear

  ) 13.

• animation-fill-mode

  : Animasyon başlamadan önce ve bittikten sonra elementin stilini belirler 1.