How to apply width ease-in-out transition to element?

July 21, 2022

Attempting to apply a transition to this image, I can’t understand why this does not work and the width styling is applied instantly versus transitioning out from its current width as expected by the function.

<!DOCTYPE html>
<html>
<body>

<img style="" id="myImg" src="https://ae01.alicdn.com/kf/S9c1b79c0b59442d0b36ea6aea9cd266fO/Super-Cat-Bed-Warm-Sleeping-Cat-Nest-Soft-Long-Pluh-Best-Pet-Dog-Bed-For-Dogs.jpg.jpg" height="98">

<p>Click the button to change the width of the image to 300px.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("myImg").style.display = "flex";
  document.getElementById("myImg").style.transition = "width 2s";
  document.getElementById("myImg").style.width = "300px";
}
</script>

</body>
</html>

>Solution :

The problem that you are having is that the attribute you are transitioning on, should be declared initially. No matter if its inline or in CSS.

So I changed your code with a random width instead of height, and it transitions now.

function myFunction() {
  document.getElementById("myImg").style.display = "flex";
  document.getElementById("myImg").style.transition = "width 2s";
  document.getElementById("myImg").style.width = "300px";
}

<img style="" id="myImg" src="https://ae01.alicdn.com/kf/S9c1b79c0b59442d0b36ea6aea9cd266fO/Super-Cat-Bed-Warm-Sleeping-Cat-Nest-Soft-Long-Pluh-Best-Pet-Dog-Bed-For-Dogs.jpg.jpg" width="105">

<p>Click the button to change the width of the image to 300px.</p>

<button onclick="myFunction()">Try it</button>