I'm trying to make a box slide from left to right using only transition like this:
#box {
width: 150px;
height: 150px;
background: red;
position:absolute;
transition: all 2s ease-out;
right:auto;
}
.active{
background-color: green !important;
right:0 !important;
}<div id="box" onclick="this.classList.add('active')"></div>but for some reason the box doesn't slide to the right
This solution works but there is no explanation to it
can someone please explain why the background color transitions but not the right position?
you have to specify the 'right' property for the box in px or in %, instead of 'auto'.
#box {
width: 150px;
height: 150px;
background: red;
position:absolute;
transition: all 2s ease-out;
right:calc(100% - 150px); /* right is positioned to left by reducing the actual box width */
}
.active{
background-color: green !important;
right:0 !important;
}<div id="box" onclick="this.classList.add('active')"></div>Using right: auto; does not work.
#box {
width: 150px;
height: 150px;
background: red;
position:absolute;
transition: all 2s ease-out;
right:100%;
transform: translate(100%,0);
}
.active{
background-color: green !important;
right:0 !important;
transform: translate(0,0) !important;
}<div id="box" onclick="this.classList.add('active')"></div>Try using animation instead and add keyframes as in snippet below.
#box {
width: 150px;
height: 150px;
background: red;
position:absolute;
animation: slide 2s forwards ease-out;
right:auto;
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(50%);
}
} <div id="box"></div>