CSS Animasyon: @keyframes ile Hareket

CSS ile öğeleri JavaScript'siz hareketlendirebilirsin. Anahtar: @keyframes.

Animasyon tanımla

@keyframes kaydir {
  from { transform: translateX(0); }
  to   { transform: translateX(200px); }
}

Öğeye uygula

.kutu {
  animation: kaydir 2s ease-in-out infinite alternate;
}

2s süre, infinite sonsuz tekrar, alternate gidip gelme demektir.

Yanıp sönme

@keyframes yanip-son {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

Animasyonları Kod Editörü'nde hemen deneyebilirsin!