Animasyon Kompozisyonu ile Renk Karıştırma
CSS'de renkleri karıştırmak, daha yeni destek kazanan işlev sayesinde neredeyse çözülmüş bir sorun color-mix(). İki renk değeri girin — herhangi iki renk değeri — ve isteğe bağlı olarak oranları ayarlayın.
background-color: color-mix(#000 30%, #fff 70%);Ayrıca renkleri bir renk alanından diğerine aktarabilen ve oradan değiştirebilen göreceli renk sözdizimimiz de var. Önde gelen kullanım örneği, adlandırılmış renkler gibi, desteklemeyen renk değerlerine opaklık eklemenin bir yoludur.
background-color: hsl(from black h s l); /* hsl(0 0% 0%) */
background-color: hsl(from black h s l / 50%); /* hsl(0 0% 0% / 50%) */Sanırım biraz hile yapıp bir opak öğenin üzerine başka bir opak öğe yerleştirebiliriz.
Aynı genel fikir belki, ama mix-blend-mode? ile
Oraya ulaşmanın bir başka dolambaçlı yolu, Ryan'ın Almanak'taki mülke eklediğianimation güncellemeleri incelerken bu sabah gördüğüm bir şeydi . Şimdi, hepimiz bunun animationyaklaşık bir gajilyon diğer mülkün kısaltması olduğunu biliyoruz (sırasını her zaman anlayamam). Bunlardan biri animation-compositionve bu da... Ryan açıklamayı çiviliyor:
CSS'de bir özellik tanımlamak, özelliğin altta yatan değeri olarak kabul edilen şeyi de ayarlar. Varsayılan olarak, anahtar kare animasyonları yalnızca animasyon içinde tanımlanan efekt değerlerini dikkate aldıklarından altta yatan değeri yok sayar. Anahtar kareler, animasyonun tarayıcıya işlenme sırasını belirleyen bir efekt değerleri yığını oluşturur. Bileşik işlemler, CSS'nin altta yatan efekti anahtar kare efekt değeriyle birleştirme şeklidir.
Manuel Matuzović ve Robin Rendle'ın da mülkü açıklamak için mükemmel yolları var; bunlardan ilki bizi Almanak'ı güncellemeye yöneltti.
Tamam! Anahtar karelerde tanımlanan efekt değeri lehine, temel özellik değerine, animation-compositiononlara veya birden fazla değeri birleştirmeye yönelik üç değerimiz var . Bizim için ilginç olan değerdir çünkü... aman Tanrım, Ryan'ın almasına izin verelim:replaceaddaccumulateadd
[A]natılan bir özellik değerini anahtar karenin efekt değeriyle değiştirmek yerine
background-color, renk türü değerleri birleştirilerek yeni renkler oluşturulur.
A-ha! Örnek şu şekilde:
Bunu görüyor musunuz? addDeğer, birinden diğerine geçiş yaparken iki rengi harmanlar. Ayrıca, anahtar karelerde replacebildirdiğimiz renk yerine %100 işaretinde tamamen yeni bir renk elde etmemize rağmen, bu geçişin değerden ne kadar daha pürüzsüz olduğunu fark edin. Animasyonu herhangi bir noktada durdurursak ne olur? Ondan yeni bir renk değeri çıkarabilir miyiz?
Ryan bunu, öğelerin üzerine gelindiğinde animasyonun duraklatılmasını sağlayacak şekilde yaptı. DevTools'u açıp :hoveröğeye pseudo'yu zorlarsak, belki de yeni renk değerini almak için Hesaplanmış sekmesine gidebiliriz.
İlginçtir ki, orada bazı RGB dönüşümleri elde ediyoruz. Muhtemelen renk kanallarını güncellemek bir hex'i diğerine dönüştürmekten daha kolay olduğu için mi? Tarayıcılar akıllıca şeyler yapar.
Şimdi eski renk enterpolasyonu demomu güncellemek istiyorum…
Hmm, eğitimsiz gözüm için hiçbir farkı yok. Belki de bunun tek nedeni HSL'nin renk kanalını değiştirmemiz ve bunun çok ince olmasıdır. Durum ne olursa olsun, animation-compositionyeni hesaplanmış renk değerleri üretebilir. Bunlara ne için ihtiyacınız var ve bunlarla ne yapardınız? Bilmiyorum ama çılgına dönün.
Animasyon Kompozisyonu ile Renk Karıştırma ilk olarak DigitalOcean ailesinin bir parçası olan CSS-Tricks'te yayınlanmıştır . Bülteni almalısınız .