CSS Transition Between Left -> Right and Top -> Bottom Positions

CSS Transition doesn't work with top, bottom, left, right

Try setting a default value for top in the CSS to let it know where you want it to start out before transitioning:

CSS

position: relative;
transition: top 2s ease 0s; /* only transition top property */
top: 0; /* start transitioning from position '0' instead of 'auto' */

The reason this is needed is because you can't transition from a keyword, and the default value for top is auto.

It is also good practice to specify exactly what you want to transition (only top instead of all) both for performance reasons and so you don't transition something else (like color) unintentionally.

transition with right using css?

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>

CSS: Transition of left, right positioning

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.

Transition for moving objects with position: fixed?

You're missing px on your top value, which should read top: 50px;

$('button').on('click', function() {  $('h1').toggleClass('top');})

.content-header {  position: fixed;  top: 50px;  width: inherit;  z-index: 1030;  padding: 12px 15px 12px 15px;  transition: top 1s linear;}
.content-header.top {  top: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h1 class="content-header">header</h1><button>click</button>

CSS animation (position) not smooth

This should work like you expect it to: https://jsfiddle.net/38tf0j21/2/

This is using the transform property instead of left

CSS Transition after animation ends

I have forked your project and adapted it so it works. You can find it here.

What I have changed is the following:

I give the white square a start position of top: 150px and let it, on hover of div, get a top: 0. The span gets a transition: top .5s and with that it goes to top: 0; on hover and back to top: 150px; when the mouse leaves.

I have removed the translateY(-60px); from the animation, because that would move it even more up when the animation would start.

Here's your new CSS:

div {
    width: 200px;
    height: 200px;
    margin: 40px auto;
    background-color: #b00;
    position: relative;

    &:hover {
        span {
            top: 0px;
            animation: rotate 1s infinite .5s alternate;
            animation-direction: alternate;
        }
    }
}

span {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #fff;
    bottom: 10px;
    left: 0;
    right: 0;
    top: 150px;
    margin: auto;
    transition: top .5s;
}

@keyframes rotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(-90deg);
    }
}

Edit: The problem is that an animation is time-based and not action-based, which means that as soon as you trigger an animation, a timer starts running and it will run through all the keyframes until the set time has passed. Hover-in and hover-out have no effect, except that the timer can be stopped prematurely, but the animation will not continue (or reversed, which you wanted) after that. transition is action-based, which means it gets triggered every time an action (for example :hover) is happening. On :hover, this means it takes .5s to go to top:0 and when the hover ends, it takes .5s to got to top:150px.

I hope the above addition makes sense :)

As you can see, I also cleaned up a bit in your animation-name: etc., since it can be combined into one line.