CSS Anahtar Kare Animasyon Oluşturucu

Bir CSS @keyframes kuralı gerçekten küçük bir zaman çizelgesidir: her biri bir özelliğin tam o anda nasıl görünmesi gerektiğini bildiren ve tarayıcının aradaki her şeyi enterpolasyona tabi tuttuğu bir dizi yüzde kontrol noktası. Elle bir tane inşa etmek, çeşitli özelliklerde bu yüzde kontrol noktalarından birkaçını aynı anda kafanızda tutmak anlamına gelir; bu oluşturucu, bu zaman çizelgesini gerçekten görebileceğiniz ve sürükleyebileceğiniz bir şeye dönüştürür: her kontrol noktasında bir durma işaretiyle mülk başına bir yatay şerit.

Odak noktası, fırçalama oynatma kafasıdır. Bunu %0 ile %100 arasında herhangi bir noktaya sürüklediğinizde önizleme kutusu o andaki tam birleştirilmiş duruma atlar; en yakın ana kareye değil, her aktif izde oynatma kafasını çevreleyen iki durak arasında hesaplanan gerçek doğrusal enterpolasyonlu değere. Konum, döndürme ve ölçek gibi sayısal özellikler düz sayılar olarak hesaplanır; arka plan rengi, her kırmızı, yeşil ve mavi kanalı bağımsız olarak enterpolasyona tabi tutar; bu, bir renk izinin, gerçekte ayarladığınız renkler arasında geçiş yapmak yerine, ara tonlar boyunca yumuşak bir şekilde solmasını sağlar.

Birden çok parça otomatik olarak tek bir tutarlı animasyonda birleştirilir: her dönüşüm tabanlı özellik (taşıma, döndürme, ölçekleme), her anahtar kare yüzdesinde tek bir dönüşüm bildiriminde birleşir; opaklık ve arka plan rengi ise tam olarak elle yazılmış CSS'nin görünümüne benzer şekilde kendi satırlarında kalır. Belirli bir parçanın açık bir durağının olmadığı yüzdeler, o özelliğin bildirimlerinin kasıtlı olarak dışında bırakılır; tarayıcının kendi ana kare enterpolasyonu, elle yazdığınız herhangi bir @keyframes kuralında olduğu gibi, mevcut duraklar arasındaki boşluğu doldurur.

Beş ön ayar (sıçrama, sallama, darbe, solma ve içeri girme) tek tıklamayla eksiksiz, ince ayar yapmaya hazır bir zaman çizelgesi (mantıklı bir süre, zamanlama işlevi ve tekrar sayımı dahil) yükler. Dinamik olarak enjekte edilmiş bir stil sayfası aracılığıyla anında oluşturulan gerçek CSS animasyonunun önizleme öğesinde çalışmasını görmek için herhangi bir noktada Oynat'a basın, ardından @keyframes bloğunun tamamını artı .animated-element { animasyon: ... } kısayolunu doğrudan kendi projenize kopyalayın. Bu sitedeki her araç gibi, bunların tümü tarayıcıda hiçbir şey yüklenmeden yerel olarak çalışır.