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
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
https://stackblitz.com/edit/react-chattes-profile-bhsu34?embed=1&file=style.css