CSS Keyframes Oluşturucu

Dört ön ayar

Fade slide

.animated {
  animation: fade-slide 0.6s ease both;
}

@keyframes fade-slide {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

Öğe, alttan yukarı kayarken belirir.

Pulse

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.05); opacity: .8; }
}

Nefes alıp veren yumuşak bir efekt; bildirim noktaları ve rozetler için idealdir.

Spin

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

Tam bir dönüş; yükleyiciler ve simgeler için kullanışlıdır.

Bounce

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-24px); }
}

Öğe yukarı zıplar ve geri döner.

Neden transform ve opacity?

Tarayıcılar, transform ve opacity değerlerini düzeni yeniden hesaplamadan veya yeniden boyamadan GPU üzerinde birleştirir, bu yüzden animasyon akıcı kalır. Ön ayarlar, düzen hesaplamasını tetikleyen özellikleri bilinçli olarak kullanmaz.

animation kısa gösterimi

animation: fade-slide 0.6s ease both; şöyle okunur: fade-slide adlı animasyon, 0.6 saniye süreli, varsayılan ease yumuşatmasıyla. both doldurma modu, animasyon başlamadan önce başlangıç durumunu uygular ve bittikten sonra bitiş durumunu korur; böylece öğe harekete başlamadan önce yanıp sönmez veya hareketin ardından aniden geri dönmez.

Adlandırma kuralları

• CSS kuralına uygun olarak tireli küçük harf formatı kullanın.
• Öğeyi değil hareketi tanımlayın: alert-appear yerine fade-in-up daha iyidir.
• Üçüncü taraf kitaplıklarla çakışabilecek adlardan kaçının.

Tarayıcı desteği

@keyframes evrenseldir, IE 10’dan bu yana her tarayıcıda desteklenir.