אנחנו יכולים ליצור משתנים ב-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()
הופך לדבר אמיתי.