I'm trying to make this in pure css: Codepen
and I want to make the same thing but in css. this is my css:
.text{
--a: calc(var(--a);*0.82+(1.5-var(--b);)/10);
--b: calc(var(--b);+var(--a););
transform: scale(var(--b););
}
It doesn't work. I've tried soo many things and none of them have worked. Please help!
All the information I went through to get that non working css:
First, your css code is quite messy. Semicolons (;) are used for each propery in css file. Let me fix your code
body{
--bounce: 100; //create the variables first on parent element
--size: 100;
}
.text{
--bounce: calc(var(--bounce) * 0.82 + (1.5 - var(--size) / 10));
--size: calc(var(--bounce) + var(--size));
transform: scale(--size);
}
Please note, operator sign '+', '-', '*', and '/' must have 1 extra space between two variables or numbers.
