संख्यात्मक CSS चरों को प्रक्षेपित करना

हम CSS में बहुत आसानी से वेरिएबल बना सकते हैं:

:root {
  --scale: 1;
}

और हम उन्हें किसी भी तत्व पर घोषित कर सकते हैं:

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

इस तरह के एक उदाहरण के लिए और भी बेहतर है कि वेरिएबल को यूजर इंटरेक्शन पर लागू कर रहे हैं, कहते हैं :hover:

:root {
  --scale: 1;
}

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

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

लेकिन अगर हम उस वेरिएबल को एनीमेशन में इस्तेमाल करना चाहते हैं ... नाडा।

:root {
  --scale: 1;
}

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

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

ऐसा इसलिए है क्योंकि चर को एक स्ट्रिंग के रूप में पहचाना जाता है और हमें जो चाहिए वह एक संख्या है जिसे दो संख्यात्मक मानों के बीच प्रक्षेपित किया जा सकता है। वहीं पर हम कॉल कर सकते हैं @property चर को न केवल एक कस्टम गुण के रूप में पंजीकृत करने के लिए, बल्कि इसके सिंटैक्स को एक संख्या के रूप में परिभाषित करने के लिए:

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

अब हमें एनीमेशन मिलता है!

आप चाहते हैं ब्राउज़र समर्थन की जाँच करें के बाद से @property केवल क्रोम में उतरा है (में शुरू हो रहा है 85 संस्करण) इस लेखन के रूप में। और अगर आप इसे सूंघने की उम्मीद कर रहे हैं @supports, हम वर्तमान में भाग्य से बाहर हैं क्योंकि यह नियमों को मूल्यों के रूप में स्वीकार नहीं करता है ... अभी तक। वो एक बार बदल जाएगा at-rule()एक वास्तविक चीज बन जाती है.