<a href="https://stackoverflow.com/a/64322555/104380" target="_blank">Based on my anwer in stackoverflow</a>
<div></div>
:root{
--color1: salmon;
--color2: lightgreen;
}
@keyframes if-else-1{
to{
--height: 160px;
--radius: 30px;
--color: var(--color2);
opacity: .4; /* consider this as additional, never-before, style */
}
}
@keyframes if-else-2{
to{
content: "true";
color: green;
}
}
div{
--width: 70; /* must be unitless */
--height: 80px;
--radius: 10px;
--color: var(--color1);
--widthThreshold: 50;
--bool: Min(1, Max(var(--width) - var(--widthThreshold), 0));
text-align: center;
white-space: nowrap;
transition: .3s;
/* if element is narrower than --widthLimit */
width: calc(var(--width) * 1%);
height: var(--height);
line-height: var(--height);
border-radius: var(--radius);
background: var(--color);
/* else */
animation: if-else-1 forwards steps(var(--bool));
}
/* prints some variables */
div::before{
counter-reset: aa var(--width);
content: counter(aa)"% is over 50% width ? ";
}
div::after{
content: 'false';
font-weight: bold;
color: darkred;
/* if element is wider than --widthLimit */
animation: if-else-2 forwards steps(var(--bool)) ;
}
// unrelated //
body{
height: 100vh;
display: grid;
place-items: center;
}
a{
position: fixed;
top: 1em;
left: 1em;
}
View Compiled
var elm = document.querySelector('div')
setInterval(()=>{
var newWidth = Math.round(Math.random()*80 + 20);
elm.style.setProperty('--width', newWidth)
}, 1000)
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.