CSS Animation, Absolute Position Go Off Screen to Right and Come Back from Left

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 Animation: Making elements moving from right to left

1. Instead of using background-position use transform: translate(). You can read about it here.
2. You wrote the @keyframes inside the .item which is not correct.

  #container {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(12, minmax(300px, 1fr));
  grid-column-gap: 30px;
  grid-row-gap: 20px;
}

.items {
  height: 210px;
  background-color: blue;
  animation: moving 5s infinite linear;
}

@keyframes moving {
  0% {
    transform: translate(0, 0)
  }
  50% {
    transform: translate(-450px, 0)
  }
  100% {
    transform: translate(-900px, 0)
  }
}

<div id="container">
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
  <div class="items"></div>
</div>

CSS animation to disappear toward right and reappear from left

The movement in the example site is characterised as: start off screen, come in from the left fast to a point slightly more than midway, move a short distance slowly, then shoot offscreen to the right.

This snippet achieves this by first keeping the element off screen to the left with a negative translateX, then moving to the right of center within the first 10% of the animation, so that's within 1second, then moving just 5% of the width of the screen for the next 80% of the animation (ie 8seconds) and then shooting off to the right in the remainder of the animation.

Change the animation's %s to get the timing you want.

Note that the element being animated had been given a fixed width of 2em which was not wide enough to accommodate the text so for this demo that has been removed, otherwise little bits of the text peep out from the left at the start.

.arrow {
  position: absolute;
  height: 2em;
  color: white;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-delay: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-play-state: running;
  animation-name: arrows_animation;
  transform: translateX(-100%);
}

@keyframes arrows_animation {
  0% {
    animation-timing-function: ease-out;
  }
  10% {
    animation-timing-function: ease-in;
    transform: translateX(60vw);
  }
  90% {
    animation-timing-function: ease-out;
    transform: translateX(65vw);
  }
  100% {
    transform: translateX(100vw);
  }
}

<div style="background-color: black; overflow: hidden; height: 200px; width: 100%;">
  <div class="arrow">
    SOME TEXT
  </div>
</div>

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 from Left to Right

Since this question is still getting alot of attention and none of the soulotions yet provide the full answer that I was trying to achieve, I'll give an example how I solved it some years ago.

First to make the animation go left to right, like many other questions have showed:

#pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 0;    
  }
}

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

Animate a div to move left to right then back

This maybe?

I'm uncertain if the square is supposed to keep spinning when it gets to the enter. That's a different matter without an easy CSS-only solution.

@keyframes move    {        0%   {            left: 0%;          transform: rotate(0deg) ;        }        50%  {          left: 100%;          transform: rotate(0deg) ;        }        52% {         transform: rotate(90deg);        }        70% {          transform: rotate(180deg);        }        100% {          left: 50%;          transform: rotate(360deg);}    }

    body {        background: white;    }
    .square {        background: black;        width:10px;        height:10px;        position: absolute;        animation: move 5s linear forwards;    }

<div class="square"></div>

CSS animation/transform going off screen

change your transform for 25% to

transform: rotate(90deg) translate(50px,0px);

and 75% to

transform: rotate(-90deg) translate(50px,0px);

fiddle

Animating an element to go left, outside of div

If I understand you correctly you could use this:

@keyframes moveLeft{
    0%{
    left: 0;}

    100%{
    left: -100px;}

The reason this works is your element isn't positioned as absolute. So using right: has no meaning as that is only used for positioning an absolute element. Whereas left can be used for relative positioned elements:

If position: relative; - the left property sets the left edge of an
element to a unit to the left/right of its normal position.

You can read more about the left property here

CSS animation extends past edge of screen

There's a css property called overflow. It specifies what happens if your content overflows an element's box. In your case your parent element wrapper should have: overflow: hidden;.

In case that does not work you can add that same property to your body tag and prevent any element to overflow it with body { overflow: hidden; }.

More info on overflow property here.

UPDATE:

Overflow can be both horizontal and vertical.
overflow-x and overflow-y respectively.

In order for overflow hidden to work with children elements that have position: absolute, you need to specify in your parent element the css property position: relative.

(In your case your element with class "wrapper" is the parent and should have position relative, note: Unwrap your header from the wrapper element.)

Here's a quick demo: jsfiddle.

---

Related Topics