Sayısal CSS Değişkenlerini İnterpolasyon

CSS'de oldukça kolay bir şekilde değişkenler yapabiliriz:

:root {
  --scale: 1;
}

Ve onları herhangi bir elementte ilan edebiliriz:

.thing {
  transform: scale(--scale);
}

Bunun gibi bir örnek için daha da iyisi, değişkeni bir kullanıcı etkileşimine uygulamaktır. :hover:

:root {
  --scale: 1;
}

.thing {
  height: 100px;
  transform: scale(--scale);
  width: 100px;
}

.thing:hover {
  --scale: 3;
}

Ama bu değişkeni bir animasyonda kullanmak istersek… nada.

:root {
  --scale: 1;
}

@keyframes scale {
  from { --scale: 0; }
  to { --scale: 3; }
}

/* Nope! */
.thing {
  animation: scale .25s ease-in;
  height: 100px;
  width: 100px;
}

Bunun nedeni, değişkenin bir dizge olarak tanınması ve ihtiyacımız olan şeyin iki sayısal değer arasında enterpolasyon yapılabilecek bir sayı olmasıdır. arayabileceğimiz yer orası @property değişkeni yalnızca özel bir özellik olarak kaydetmekle kalmayıp, sözdizimini bir sayı olarak tanımlamak için:

@property --scale {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

Şimdi animasyonu alıyoruz!

sen isteyeceksin tarayıcı desteğini kontrol edin beri @property yalnızca Chrome'a ​​​​indi (başlangıçta sürümü 85) bu yazı itibariyle. Ve eğer onu koklamayı umuyorsan @supports, şu anda şansımız yok çünkü kuralları değer olarak kabul etmiyor… henüz. Bu bir kez değişecek at-rule()gerçek bir şey olur.