Transition-и на CSS променливи и ограничения
Transition-ите в CSS са станали ежедневие поради естествения стремеж всякакви промени в web страниците да стават плавно. С въвеждането на CSS променливи се отключват доста врати за възможности на нови анимации, но те не са безгранични.
Цветове
Едно от първите неща, които аз самият опитах да анимирам беше цвят. Но не просто стандартна анимация от един цвят към друг, както и сега можем да направим, а целта ми беше да премине през всички цветове на дъгата:
Когато не се получи нищо се позачудих дали има проблем с преминаване на стойността на --hue променливата от 0 до 359, затова опитах със 180:
И останах разочарован, че се държи по същия начин, все едно не анимирам --hue през всички стойности от 0 до 180 (1, 2, 3, 4 и т.н. до 178, 179 и накрая 180). А вместо това се държи все едно анимирам просто между двата съответни цвята (начален и краен) зададени все едно като HEX стойности #FF0000 и #00FFFF:
Оказва се, че стойностите на CSS променливите не могат да бъдат интерполирани, затова не могат да се ползват и в анимации. Така де – поне за сега; или дори: поне от повечето браузъри (spoiler alert: към момента има начин това да се постигне в Chrome).
За щастие, когато се ползват в transition-и имаме поне частична поддръжка. Идеята е, че (поне в случая на :hover, но и в някои други) един transition може да се изчисли като се вземе начално и крайно състояние на стиловете и се анимира преминаването от първото към второто.
Затова и няма значение, дали ползваме #FF0000, rgb(255, 0, 0), hsl(var(--hue, 0deg)), red или дори някакъв начин, с който да обозначим червен цвят; когато се опитаме да анимираме от него към нещо друго самата анимация винаги ще протече по един и същи начин.
И все пак можем да се възползваме от ефекти като този, в който „осветяваме с червен, зелен и син прожектор един черен квадрат“:
Трансформации
Тук положението е много подобно на горното. Повечето случаи, в които се опитваме да направим анимация (разбирайте transition) между стилове на елемент с transform – вероятно имаме стилове на начално състояние и крайно състояние. Това може да стане както с псевдо-клас :hover, така и с обикновен клас, който назначаваме/премахваме с JS.
Накрая, в поне 90% от случаите получаваме това, което целим. Ето един елементарен пример, за въртене по трите оси: