force overflow change to happen at the end of an animation

Question

#div {
  width: 20px;
  border: 2px solid black;
  animation: 5s change-width paused forwards;
}

@keyframes change-width {
  from { overflow: hidden; }
  to   { overflow: visible; width: 100px; }
}

<div id="div">abcdefghijklmnopqrstuvwxyz</div>
<button onclick="document.getElementById('div').style.animationPlayState = 'running'">
  Run
</button>

Look how the discrete animation of overflow abruptly changes in midst of the animation. How to force it to happen at the end of the animation?

I tried shifting the overflow: hidden from @keyframes to .default rule but to no avail.

#div {
  width: 20px;
  border: 2px solid black;
  overflow: hidden;
  animation: 5s change-width paused forwards;
}

@keyframes change-width {
  to {
    overflow: visible;
    width: 100px;
  }
}

<div id="div">abcdefghijklmnopqrstuvwxyz</div>
<button onclick="document.getElementById('div').style.animationPlayState = 'running'">Run</button>

Answer 1

=== overflow property can't be animated. ===
see list of accepted animated properties

You need js code for that:

const  myDiv = document.querySelector('#my-div')

document.querySelector('#my-button').onclick =_=>
  {
  myDiv.classList.add('change_w')
  setTimeout(()=>{ myDiv.classList.add('no-overflow')}, 3000)
  } 

#my-div {
  width      : 20px;
  overflow   : hidden;
  border     : 2px solid black;
  transition : width 3s ease-in-out
  }
#my-div.change_w {
  width : 100px;
}
#my-div.no-overflow {
  overflow: visible;    
  }

<div id="my-div">abcdefghijklmnopqrstuvwxyz</div>
<button id="my-button"> Run </button>

you can also use a transition end event

const  myDiv = document.querySelector('#my-div')

document.querySelector('#my-button').onclick =_=>
  {
  myDiv.classList.add('change_w')
  } 
myDiv.ontransitionend =_=> myDiv.classList.add('no-overflow')

 

#my-div {
  width      : 20px;
  overflow   : hidden;
  border     : 2px solid black;
  transition : width 5s ease-in-out
  }
#my-div.change_w {
  width : 100px;
}
#my-div.no-overflow {
  overflow: visible;    
  }

<div id="my-div">abcdefghijklmnopqrstuvwxyz</div>
<button id="my-button"> Run </button>

for the reccord : in and out show / hide

const
  myDiv = document.querySelector('#my-div')
  mybt  = document.querySelector('#my-button')

  mybt.onclick =_=>
  {
  mybt.disabled = true
  myDiv.classList.remove('no-overflow') 

  let largeWidth = myDiv.classList.toggle('change_w')
  myDiv.addEventListener('transitionend', finish )
    
  function finish()
    {
    mybt.disabled = false
    if (largeWidth) myDiv.classList.add('no-overflow') 
    myDiv.removeEventListener('transitionend', finish )
    }
  } 

#my-div {
  width      : 40px;
  overflow   : hidden;
  border     : 1px solid black;
  transition : width 3s ease-in-out
  }
#my-div.change_w {
  width : 100px;
  }
#my-div.no-overflow {
  overflow: visible;    
  }

<div id="my-div">abcdefghijklmnopqrstuvwxyz</div>
<button id="my-button"> Run </button>