Search code examples
htmlcss

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