cubic-bezier CSS Animation with no keyframes

I’m trying to copy the animation shown in this video but I can’t get it to work – https://www.youtube.com/watch?v=aCWeVAu0v2U

I feel like I’ve tried everything to make it work but nothing I do works.

My code:

<img class="item" src="https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg" alt="">
<img class="item" src="https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg" alt="">
<img class="item" src="https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg" alt="">
<img class="item" src="https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg" alt="">
<img class="item" src="https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg" alt="">

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
}

.item {
  width: 300px;
}

.item:hover {
  transition: width 0.5s cubic-bezier(.87,-1.38,.03,1.54);
}

>Solution :

you can put the transition in the initial state of your .item like that :

    .item {
      width: 300px;
      transition: width 0.5s cubic-bezier(.87,-1.38,.03,1.54);
    }
    
    .item:hover {
      width: 500px;
    }

if the transition is in the :hover, it will only apply when the element is hovered over, so there will be no transition animation

took the 500px from the video btw