<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;
}

var elm = document.querySelector('div')

setInterval(()=>{
  var newWidth = Math.round(Math.random()*80 + 20);
  elm.style.setProperty('--width', newWidth)
}, 1000)