CSS Spinner Animasyonu Oluşturucu

Animasyon nasıl kurulur

Oluşturulan CSS, birlikte çalışan iki parçadan oluşur. .loader üzerindeki animation özelliği animasyona bir ad verir, süresini belirler, zamanlama fonksiyonunu seçer ve tekrarlar:

animation: spin 0.8s linear infinite;

@keyframes spin kuralı hareketin kendisini tanımlar. Yalnızca bir bitiş durumu içerir: 360 derecelik bir dönüş. Tarayıcı öğenin normal konumundan başlar ve bu bitiş durumuna doğru ara değerler hesaplar:

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

Araçtaki Hız (s) alanı animasyonun süresi olur. linear ve infinite dahil diğer her şey aynı kalır.

Süre seçimi

Büyük halkalar, büyük bir dairenin kenarı her saniye daha uzun bir mesafe kat ettiği için küçük olanlardan biraz daha yavaş dönebilir.

Neden lineer zamanlama

Araç linear kullanır; böylece halka çevre boyunca aynı açısal hızı korur. ease-in-out gibi yumuşatma eğrileri ise halkanın her turda yavaşlamasına ve hızlanmasına neden olur; bu, sonsuz bir döngüde takılma gibi görünür. Yine de bu etkiyi istiyorsanız kopyaladığınız CSS’te linear kelimesini değiştirin.

Akılda tutulacak sınırlar

• Hız 0 olduğunda animasyon sıfır uzunlukta olur ve halka görünür biçimde dönmez. 0’dan büyük bir değer kullanın.
• Spinner her zaman saat yönünde döner. Yönü tersine çevirmek için kopyaladıktan sonra bitiş dönüşünü -360deg yapın.
• Hareket tek ve sürekli bir dönüştür. Nabız gibi atma, zıplama veya çok adımlı hareket için elle yazılmış ek keyframes gerekir.

Animasyonu duraklatma ve yönetme

CSS’i sayfanıza ekledikten sonra animasyonu standart özelliklerle yönetebilirsiniz. animation-play-state: paused; halkayı yerinde dondurur; iş bittiğinde ama öğe görünür kalmalıyken işe yarar. animation-delay: 0.2s; başlangıcı erteler; böylece spinner yalnızca bekleme anlık değilse görünür. Bunlar, kopyaladıktan sonra .loader kuralına eklediğiniz standart CSS özellikleridir.