transition with right using css?-CodePudding

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?

CodePudding user response：

Using right: auto; does not work.

#box {
  width: 150px;
  height: 150px;
  background: red;
  position:absolute;
  transition: all 2s ease-out;
  right:calc(100% - 150px); /* Changed */
}

.active{
  background-color: green !important;
  right:0!important;
}

<div id="box" onclick="this.classList.add('active')"></div>

CodePudding user response：

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>

CodePudding user response：

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>