#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>=== 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>