CSS Animate a Div with Absolute Positioning from Left 0 to Right 0

CSS animate a div with absolute positioning from left 0 to right 0

You need to animate one property or the other. You can just animate left and either use left: calc(100% - elemWidth) (where elemWidth is the width of the element) or left: 100%; transform: translateX(-100%); if the width of the element is unknown.

Also need to animate background color.

.container { position: relative; width: 80%; height: 100px; border: 1px solid black;}
.animated { position: absolute; width: 20%; height: 100%; top: 0; background-color: red; animation: 3s linear 0s slide infinite;}
@keyframes slide {  from { left: 0; }  to {    left: 100%;    transform: translateX(-100%);    background: blue;  }}

<div class=container><div class=animated></div></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>

Animate absolute div to left:0 then to right:0 and loop

As far as I understand positioning in CSS, you can't have both a right and a left value set at the same time.

So I would propose the follow. Just move it to the end of the document minus the width of the element:

$(document).ready(function() {

  var width = $(document).width() - $('#mydiv').width();

  function animateMydiv() {
    $('#mydiv').animate({'left': width + 'px'}, 6000).animate({'left': '0px'}, 6000);

  }

  animateMydiv();

}); 

Check out the fiddle: http://jsfiddle.net/bc927afp/1/

And if you want it to be endless, leave the function as you had in your example:
$('#mydiv').animate({'left': width + 'px'}, 6000).animate({'left': '0px'}, 6000, animateMydiv);

How can I use CSS animations to move an element from left to right?

Try this way.

#pot {
  position: relative;
  overflow: hidden;
}

.images {
  animation: run 5s linear infinite;
}

.images img:nth-child(2) {
  position: absolute;
  left: -100%;
}

@keyframes run {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

<div id="pot">
  <div class="images">
    <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width="100px" height="100px">
    <img src="https://i.stack.imgur.com/qgNyF.png?s=328&g=1" width="100px" height="100px">
  </div>
</div>

Can I animate absolute positioned element with CSS transition?

You forgot to define the default value for left so it doesn't know how to animate.

.test {
    left: 0;
    transition:left 1s linear;
}

See here: http://jsfiddle.net/shomz/yFy5n/5/

css absolute position animated with overflow hidden

I was getting errors regarding finalH and finalW being undefined. So they where given a random start position.
Applied overflow: hidden to the sky, and you can see the outcome. I really like the effect and the fact that shooting stars don't come from one direction only and in addition the fact that not all dissolve inside the viewport.

var sky = document.getElementById('sky')

function createShootingStar() {
  var finalW = Math.random() * window.outerWidth;
  var finalH = Math.random() * window.outerHeight;
  var time = Math.floor(Math.random() * (1000 - 800) + 800) / 1000
  var finalTime = time.toFixed(2)
  var random = Math.round(Math.random())

  var tx = Math.floor(Math.random() * finalW)
  var ty = Math.random() * (finalH * 0.25 - 0) + 0

  var element = document.getElementById('shootingstar')
  var cln = element.cloneNode(true)
  cln.classList.add('shootingstar')
  random == 1 ?
    cln.classList.add('shootingstar-animation-right') :
    cln.classList.add('shootingstar-animation-left')
  cln.style.animationDuration = finalTime + 's'
  cln.style.right = tx + 'px'
  cln.style.top = ty + 'px'
  sky.appendChild(cln)
  setTimeout(function() {
    sky.removeChild(cln)
  }, 3000)
}

setInterval(createShootingStar, 1000)

.shootingstar {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  transform-origin: 100% 0;
  animation-iteration-count: 1;
  opacity: 0;
}

#sky {
  background-color: #000;
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.shootingstar-animation-right {
  animation: shootingstar-right-down ease-out;
}

.shootingstar-animation-left {
  animation: shootingstar-left-down ease-out;
}

.shootingstar-animation-right:after {
  content: '';
  position: absolute;
  border: 2px solid #f00;
  border-width: 2px 150px 2px 150px;
  border-color: transparent transparent transparent #fff;
  transform: rotate(-45deg) translate3d(1px, 2px, 0);
  transform-origin: 0% 100%;
}

.shootingstar-animation-left:after {
  content: '';
  position: absolute;
  border: 2px solid #f00;
  border-width: 2px 150px 2px 150px;
  border-color: transparent transparent transparent #fff;
  transform: rotate(-135deg) translate3d(1px, 5px, 0);
  transform-origin: 0% 100%;
}

@-webkit-keyframes shootingstar-right-down {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0) translate3d(0, 0, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(0) translate3d(-100px, 100px, 0);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotate(0) translate3d(-150px, 150px, 0);
  }
}

@-webkit-keyframes shootingstar-left-down {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0) translate3d(0, 0, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(0) translate3d(200px, 200px, 0);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotate(0) translate3d(300px, 300px, 0);
  }
}

<div id="sky">
  <span id="shootingstar"></span>
  <div id="allstars"></div>
</div>

Transition with absolute positioning

For transition to happen, you need values on both the parent and hover element selectior.

Here i just added proper values to both the selectors , and by subtracting their heights easily.

.one {  background: green;  height: 100px;  width: 100px;  position: absolute;  border-radius: 100px;  transition: all 1s ease;  top: 0%;  left: 0%;}.one:hover {  background: red;  top: calc(100% - 100px);  left: calc(100% - 100px);}

<div class="one"></div>

---

Related Topics