CSS Animation from Left to Right

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>  

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

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>

CSS Animation - text sliding left to right

You can hide the text initially and rely on forwards to keep the last state

.slide-right {  width: 100%;  overflow: hidden;  margin-left: 300px;  max-width: 500px}
.slide-right h2 {  animation: 2s slide-right 2s forwards;    transform:translateX(-100%);}
@keyframes slide-right {  to {    transform:translateX(0);  }}

<div class="slide-right">  <h2>Text that will slide in from the left</h2></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>

How to animate underline from left to right?

You can use gradient and adjust background-position with a delay to obtain such effect:

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000 0 0);
  background-position: 0 100%; /*OR bottom left*/
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
    background-size 0.3s,
    background-position 0s 0.3s; /*change after the size immediately*/
}

.un:hover {
  background-position: 100% 100%; /*OR bottom right*/
  background-size: 100% 2px;
}

<span class="un">Underlined Text</span>

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-moving text from left to right

Somehow I got it to work by using margin-right, and setting it to move from right to left.
http://jsfiddle.net/gXdMc/

Don't know why for this case, margin-right 100% doesn't go off the screen. :D
(tested on chrome 18)

EDIT: now left to right works too http://jsfiddle.net/6LhvL/

---

Related Topics