אינטרפולציה של משתני 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;
}

עכשיו אנחנו מקבלים את האנימציה!

אתה הולך לרצות בדוק את תמיכת הדפדפן since @property נחת רק בכרום (החל ב גרסה 85) נכון לכתיבת שורות אלה. ואם אתה מקווה לרחרח את זה עם @supports, כרגע אין לנו מזל מכיוון שהוא לא מקבל כללים כערכים... עדיין. זה ישתנה פעם אחת at-rule()הופך לדבר אמיתי.