Left-Right Movement.. CSS Only Very Generic

Animate div from right to left with variant width CSS only

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>

Css Animation: Out left and in right?

How about this?

@keyframes run {  0%,  100% {    transform: translateX(0);  }  50% {    transform: translateX(-100vw);  }  50.000001% {    transform: translateX(100vw);  }}
.circle {  width: 50px;  height: 50px;  background: red;  border-radius: 50%;  animation: linear infinite;  animation-name: run;  animation-duration: 5s;}

<div class="circle"></div>

CSS animation, absolute position go off screen to right and come back from left

Here's the solution I proposed in the comments before:

You can make an initial cloud (.initalCloud) that just slides out of the screen and gets replaced with the regular .firstCloud afterwards.

.clouds {  position: relative;  overflow: hidden;  height: 400px;}
.initialCloud {  position: absolute;  left: 100%;  top: 150px;  animation: moveFirst 5s linear .2s;  animation-iteration-count: 1;  width: 150px;}
.firstCloud {  position: absolute;  left: -30%;  top: 150px;  animation: move 5s linear 5s infinite;  width: 150px;}
.secondCloud {  position: absolute;  left: -30%;  top: 200px;  animation: move 8s linear 0s infinite;  width: 150px;}
.thirdCloud {  top: 250px;  left: -30%;  position: absolute;  animation: move 11s linear 1s infinite;  width: 150px;}
@-webkit-keyframes move {  from {    left: -30%;  }  to {    left: 100%;  }}
@-webkit-keyframes moveFirst {  from {    left: 50%;  }  to {    left: 100%;  }}

<div class="clouds">  <div class="initialCloud">    <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164"><defs><style>.cloud1Fill{fill:#d1dbd9;}</style></defs><title>Untitled-5</title><path class="cloud1Fill" d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z"/></svg>  </div>  <div class="firstCloud">    <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164"><defs><style>.cloud1Fill{fill:#d1dbd9;}</style></defs><title>Untitled-5</title><path class="cloud1Fill" d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z"/></svg>  </div>  <div class="secondCloud">    <svg id="svgCloud2" data-name="cloud2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291 124"><defs><style>.cloud1Fill{fill:#d3dddb;}.cloud2Fill{fill:#fff;}</style></defs><title>Untitled-4</title><path class="cloud1Fill" d="M2.29,123.5A41,41,0,0,1,58.37,74.12l.32.14.24-.25A45.72,45.72,0,0,1,91.5,60.5q1.14,0,2.25.06l.43,0,.09-.41a76,76,0,0,1,148.46,0l.09.4h.41l1.27,0a46.06,46.06,0,0,1,46,46,45.53,45.53,0,0,1-3.26,17Z"/><path class="cloud2Fill" d="M168.5,1a75.53,75.53,0,0,1,73.74,59.23l.18.81.82,0,1.26,0a45.49,45.49,0,0,1,42.4,62H2.66A40.53,40.53,0,0,1,58.17,74.57l.63.29.49-.49A45.2,45.2,0,0,1,91.5,61c.75,0,1.5,0,2.23.06l.85,0,.18-.83A75.51,75.51,0,0,1,168.5,1m0-1A76.52,76.52,0,0,0,93.78,60.06Q92.66,60,91.5,60A46.35,46.35,0,0,0,58.58,73.66,41.52,41.52,0,0,0,1.92,124H287.58A46.5,46.5,0,0,0,244.5,60l-1.28,0A76.53,76.53,0,0,0,168.5,0Z"/></svg>  </div>  <div class="thirdCloud">    <svg id="svgClouds3" data-name="clouds2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 329 139"><defs><style>.cloud2Fill{fill:#d1dbd9;}</style></defs><title>Untitled-6</title><path class="cloud2Fill" d="M329,125a40.09,40.09,0,0,1-2.52,14H14.9A61.28,61.28,0,0,1,0,99C0,64.21,29.33,36,65.5,36a67.34,67.34,0,0,1,30,7A86,86,0,0,1,236.42,31.37,55.53,55.53,0,0,1,311,83.5a56.67,56.67,0,0,1-.55,7.75A39.93,39.93,0,0,1,329,125Z"/></svg>  </div></div>

CSS 3 slide-in from left transition

You can use CSS3 transitions or maybe CSS3 animations to slide in an element.

For browser support: http://caniuse.com/

I made two quick examples just to show you what I mean.

CSS transition (on hover)

Demo One

Relevant Code

.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}

In this case, I'm just transitioning the position from left: -100px; to 0; with a 1s. duration. It's also possible to move the element using transform: translate();

CSS animation

Demo Two

#slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

Same principle as above (Demo One), but the animation starts automatically after 2s, and in this case, I've set animation-fill-mode to forwards, which will persist the end state, keeping the div visible when the animation ends.

Like I said, two quick examples to show you how it could be done.

EDIT:
For details regarding CSS Animations and Transitions see:

Animations

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

Transitions

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Left to right CSS3 animation starting from center

You can use the first snippet from the question but change the opacity immediately (within .1% of the animation duration). Changing the opacity from 1 to 0 between 50% and 50.1% would make the element get hidden abruptly and not show up as it goes from the left to the right. Similarly changing the opacity back to 1 at 75.1% would make it visible when it comes back into view from the right.

Initially when you had tried, I think you may have changed the opacity at a higher interval and thus making it give a fade-in/out like appearance.

The animation was speeding up and slowing down because for the first 50% it was going from centre to left (-100vw) but it was taking only 25% of the time to come back in from the right to centre. I have modified this to allocate equal splits (that is, center to left from 0-45% and from right to centre between 55-100%) and this makes it look more smoother. It could be tuned further but I think you get the idea.

@keyframes marquee {    0% {        transform: translate3d(-50%, 0, 0);    }    45% {        transform: translate3d(-100vw, 0, 0);        opacity: 1;    }    45.1% {        opacity: 0; /* at this point in time the element is fully on the left and hidden */    }    55% {        transform: translate3d(100vw, 0, 0);        opacity: 0; /* at this point in time the element is fully on the right but still hidden */    }    55.1% {        opacity: 1; /* now we make it visible again so that it can come back into view */    }    100% {        transform: translate3d(-50%, 0, 0);    }}div {    width: 200px;    height: 50px;    background: red;    position: absolute;    left: 50%;    top: 15px;    animation: marquee 5s linear infinite;}body {    overflow: hidden;}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><div></div>

CSS: Animate right column over left column on hover

You can do this using float property.

.container {  position: relative;}
.column_2 {  margin-right: 120px;  height: 600px;  background: blue;}
.column_1 {  width: 120px;  height: 100px;  background: green;  float: right;  -webkit-transition: 500ms width;  -moz-transition: 500ms width;  -ms-transition: 500ms width;  -o-transition: 500ms width;  transition: 500ms width;}
.column_1:hover {  width: 100%;}

<h1>Hover the green column</h1>
<div class="container">  <div class="column_1"></div>  <div class="column_2"></div></div>