CSS Animate Element Inside DIV [duplicate] - html

Question

This question already has an answer here:
left-right movement.. css only very generic
(1 answer)
Closed 3 years ago.
The code below draws a circle inside a div. On the div hover the idea is to move the circle to the other edge of the div. My code works but the circle in instantly moving to the other side. I am trying to find a way to animate it moving through the div until it reaches left and then go back.
Which properties can I use to achieve this ?
div {
border-radius: 26px;
border: 1px solid;
height: 45px;
text-align: right;
transition: all .4s ease;
}
div:hover {
text-align: left;
}
.circle {
height: 45px;
width: 45px;
background-color: #bbb;
border-radius: 26px;
display: inline-block;
}
<div class="div1"><span class="circle"></span></div>

Answer 1

You cannot transition the text-align property.
Here's an example using the left property:
div {
border-radius: 26px;
border: 1px solid;
height: 45px;
}
div:hover .circle{
left:calc(100% - 45px);
}
.circle {
height: 45px;
width: 45px;
background-color: #bbb;
border-radius: 26px;
display: inline-block;
position:relative;
left:0;
transition: left .4s ease;
}
<div class="div1"><span class="circle"></span></div>

Answer 2

You're on the right path, but a little off. First, you want to apply the transition to the element you want to animate-- in this case the .circle element. Second, you need to use a property that can be animated using transition. We will use transform as it is more performant than rendering a position property. This is perhaps not exactly what you are looking for, but should put you on the right path.
div {
border-radius: 26px;
border: 1px solid;
height: 45px;
position: relative;
width: 98vw;
}
.circle {
height: 45px;
width: 45px;
background-color: #bbb;
border-radius: 26px;
display: inline-block;
transition: all 0.4s ease;
position: absolute;
right: 0px;
transform: translateX(0vw);
}
div:hover .circle {
transform: translateX(calc(-98vw + 100%));
}
<div class="div1"><span class="circle"></span></div>