I attempted to create a box with a border and a small div inside of it. I wanted the small div to animate when hovering over the box, but the animation did not start as expected. I even tried removing the hover effect, but the animation still did not work.
Here is what I have tried:
<div class="row mb-4">
<div class="col col__animation">
<div id="object"></div>
</div>
</div>
SCSS:
.col__animation{
display: flex;
border-radius: 1rem !important;
border: 1px solid #284876;
height: 200px !important;
align-items: center;
#object {
width: 40px;
height: 50px;
background: blueviolet;
margin-top: 2px;
margin-bottom: 1px;
margin-right: 3px;
}
&:hover{
#object{
transition: transform 1000ms;
transition-timing-function: ease-in-out;
}
}
}
I have been experimenting with various animation effects such as moving the box to the right and back to its initial position, among others.