CSS: Transition of left, right positioning

Question

so i have a burger menu that is sliding out from the right side, and i want to slide my <div> out of the way, to prevent an overlap (They both have an opacity <1, so it looks odd).

Anyway, i am using jQuery to change the left + right values when using the following code, the transition works great

transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;

However, i am also using a fade animation for the div that is being moved, and for some reason that is triggering. Basically it flashes, and then slowly fades in when entering the screen. So, i want to do something like the following:

transition: left .3s ease-in-out;
-webkit-transition: left .3s ease-in-out;
transition: right .3s ease-in-out;
-webkit-transition: right .3s ease-in-out;

Result: The right side is working as expected, but the left side simply jumps to its new location, whilst the right side is still animating. Any idea what im doing wrong? Here is the entire css class

aboutScreen{
  position: absolute;
  text-align: center;
  height: 100%;
  top: 0;
  left: 150px;
  right: 150px;
  background-color: rgba(0, 0, 0,0.7);

  transition: left .3s ease-in-out;
  -webkit-transition: left .3s ease-in-out;
  transition: right .3s ease-in-out;
  -webkit-transition: right .3s ease-in-out;
}

Note: If you want the JQuery, let me know

Answer 1

Your original code has this lines:

transition: left .3s ease-in-out;
-webkit-transition: left .3s ease-in-out;
transition: right .3s ease-in-out;
-webkit-transition: right .3s ease-in-out;

In CSS, when the same property is being defined more than once, the older values will be overwritten.

Which is why you only get the transition effect of right but no left.

Luckily, CSS allows multiple values to be nested in one property definition.

.aboutScreen {
  position: absolute;
  text-align: center;
  height: 100%;
  top: 0;
  left: 150px;
  right: 150px;
  background-color: rgba(0, 0, 0,0.7);

  /* Original 
  transition: left .3s ease-in-out;
  -webkit-transition: left .3s ease-in-out;
  transition: right .3s ease-in-out;
  -webkit-transition: right .3s ease-in-out;
  */

  /* Corrected */
  -webkit-transtition: left .3s ease-in-out, right .3s ease-in-out;
  transition: left .3s ease-in-out, right .3s ease-in-out;
}

PS:

If you want to make your code more readable, you can also do the following:

transition-property: left, right;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0s;

PS 2:

It is generally preferred to place non-prefixed property to the last because it is the "true" property (in other words, "standardized") that should be used by browsers.

The purpose of browser prefix such as -webkit-, -moz-, -ms- and -o- is to cater for browser versions that do not, at that time, officially support the property.

Therefore, when an prefixed property is set after a non-prefixed one, the browser will use the prefixed definition hence rendering the sometimes non-standardized behaviour.