Animate div from right to left with variant width CSS only [duplicate] - html

Question

This question already has an answer here:
left-right movement.. css only very generic
(1 answer)
Closed 4 years ago.
I have the following HTML:
.container {
width: auto;
height: 32px;
background-color: gray;
display: inline-block;
padding: 4px 8px;
min-width: 400px;
position: absolute;
}
.box {
padding: 0 6px;
height: 100%;
left: 0;
background-color: red;
width: auto;
display: inline-block;
line-height: 32px;
}
<div class="container">
<div class="box">HELLO</div>
</div>
I want to animate the div from right to left in only CSS. The issue is that the inner box has a variant width (due to translations).
If I could do an animation similar to
from {
right: 0;
}
to {
left: 0;
}
it would be exactly what I need, but unfortunately this doesn't work.
How can I animate the inner div with a variant width from left to right using only CSS. The outer div also has a variant width.
Edit:
I would like the inner div to never move outside the outer div.
This is not a duplicate because the inner AND outer container have a variant/unknown width.

Answer 1

You can do this by starting with right:100% and finish to right:0%
EDIT
I've achieve this by using 2 different methods :
by changing the right property and with using a calc() to prevent to box to go outside your container
Use a wrapper who have the width of your container minus the width of your box and use translateX property for your animation.
.container{
background-color:#ccc;
width:400px;
position:relative;
height:50px;
}
.big{
width:600px;
}
.test1 .box{
position:absolute;
width:100px;
height:100%;
right:calc(100% - 100px);
background-color:red;
animation:to-right-1 1s linear forwards;
}
.test2 .wrapper{
position:relative;
width:calc(100% - 100px);
height:100%;
animation:to-right-2 1s linear forwards;
}
.test2 .box{
width:100px;
height:100%;
background-color:red;
}
#keyframes to-right-1{
from{
right:calc(100% - 100px);;
}
to{
right:0px;
}
}
#keyframes to-right-2{
from{
transform:translateX(0%);
}
to{
transform:translateX(100%);
}
}
<div class="test1">
<div class="container">
<div class="box">Hello</div>
</div>
<div class="container big">
<div class="box">Hello</div>
</div>
</div>
<div class="test2">
<div class="container">
<div class="wrapper"><div class="box">Hello</div></div>
</div>
<div class="container big">
<div class="wrapper"><div class="box">Hello</div></div>
</div>
</div>

Answer 2

After you define left and right in class.
transition-property: right, left;
transition-duration: 2s;
-webkit-transition-property: right, left; /* Safari */
-webkit-transition-duration: 2s;
right can be done like
right:calc(100% - 400px)
and use this to make it bigger as you go.
#-webkit-keyframes big {
from { -webkit-transform: scale(.1,.1); }
to { -webkit-transform: scale(1,1); }
}
#keyframes big {
from { transform: scale(.1,.1); }
to { transform: scale(1,1); }
Use this fiddle as reference http://jsfiddle.net/MiKr13/aL7t2jvr/
}

Answer 3

You can use keyframes animation to animate'em.
.container {
width: auto;
height: 32px;
background-color: gray;
display: inline-block;
padding: 4px 8px;
min-width: 400px;
position: absolute;
}
.box {
padding: 0 6px;
height: 100%;
left: 0;
background-color: red;
width: 50px;
display: inline-block;
line-height: 32px;
}
.navr{position:absolute; z-index:55; text-align:center; margin:0 auto; bottom:0%; cursor:pointer;}
.navr {
-webkit-animation-name: bump;
-webkit-animation-duration: 0.3s;
-webkit-animation-iteration-count: 1;
animation-name: bump;
animation-duration: 2s;
animation-iteration-count: 1;
position:absolute;
left:0;
}
#keyframes bump {
0% {right:-100%;}
100% {right:85%;}
}
<div class="container">
<div class="box navr">HELLO</div>
</div>

Answer 4

If you use variant width you can use the element's width to position them.
Here the class .animated has a width of 50px; so we can move it's postion from left:100% to left:50px instead of giving left:0
because the element .animate has the absolute position. That's why we are giving it's width as position here.
.container {
position: relative;
width: 80%;
height: 50px;
border: 1px solid black;
}
.animated {
position: absolute;
width: 50px;
height: 100%;
background-color: red;
animation: .5s linear 0s slide 1;
}
#keyframes slide {
from { left: 100%; }
to {
left: 50px;
transform: translateX(-100%);
}
}
<div class=container>
<div class=animated>hello
</div></div>