Animate resizing a Div

To animate resizing a Div , say onHover we can create a

<aside> 📨 transition

</aside>

.my-button {
  position: absolute;
  bottom: 20px;
  left: 30px;
  background-color: grey;
  width: 35vw;
  height: 5vh;
  white-space: nowrap;
  overflow-x: scroll;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  **transition: 1s;**
}
.my-button:hover{
  height: 40vh;
  width: 70vw;
  border-radius: 5px;
  background-color: blueviolet
  
}

In the above code snippet we expand a div

Creating a scrollable Text

To create any sort of animation that can move from X to Y , we create a @keyframes.

For Example if we want to create an animation where the text should scroll from Right To left we create a animation called scrolling and give it a from and to property

@keyframes **scrolling** {
  from {
  transform: translateX(100%)

  }
  to {
    transform: translateX(-100%)
  }
}

Then we assign this animation to the css class as follows

.scroll-text {
  /* transform: translateX(100%); */
  animation: **scrolling** 5s linear infinite;
  
}

The below snippet is a demo of both transition animation and keyframes animation

DEMO

https://stackblitz.com/edit/react-chattes-profile-bhsu34?embed=1&file=style.css