CSS Background-Position Animate Right to Left

CSS background-position animate right to left

You could try using this tutorial: CSS Background Animation

@keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-moz-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-webkit-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-ms-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}
@-o-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -300px 0; }
}

html { 
    width: 100%; 
    height: 100%; 
    background-image: url(background.png);
    background-position: 0px 0px;

    animation: animatedBackground 10s linear infinite;
    -moz-animation: animatedBackground 10s linear infinite;
    -webkit-animation: animatedBackground 10s linear infinite;
    -ms-animation: animatedBackground 10s linear infinite;
    -o-animation: animatedBackground 10s linear infinite;
}

Example here: http://jsfiddle.net/verber/6rAGT/5/

Hope it that what you need)

Animate background image's position back and forth

The reason why you get a restart on 0 as soon as it reaches -100% is because of how animations work in general. Once they complete a loop, they generally go back to their original state and restart the next loop. So, as soon as it reaches -100% (the end state), it resets the position to 0 (the start state).

from left to right and right to left when the position is on the end

For the above, you can use the animation-direction as alternate. This would make the animation animate the background position from 0 to -100% for odd numbered iterations and then from -100% to 0 for even numbered iterations.

@keyframes animatedBackground {  0% { background-position: 0 0; }  100% { background-position: -100% 0; }}
body{  background-image: url(http://placehold.it/100x100);  background-repeat: repeat-x;  animation: animatedBackground 15s linear alternate infinite;  overflow: hidden;}

How to animate a background image from left to right and from right to left

Simple jQuery animate setting proper background-position values for x and y (I suggest using CSS transitions for smoother animation):

$(document).ready(function() {  slide();
  setInterval(function() {    slide();  }, 10000);});
function slide() {  $('body').css({    'background-position': -2000 + $(window).width() + 'px 0'  });
  setTimeout(function() {    $('body').css({      'background-position': '0 0'    });  }, 5000);}

body {  background: url('http://www.jqueryscript.net/demo/jQuery-Plugin-To-Create-Auto-Scrolling-Background-AutoBackgroundScroll-js/img/background.jpg') no-repeat left top transparent;  transition: background-position 5000ms ease-in-out;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Animate background fill from left to right using keyframes animation one by one

you can set animation-delay but for that, you'll need to remove the !important
also if there's an N amount of boxes you can add the style using JS or SCSS loop.

.box {  width: 26px;  height: 10px;  display: inline-block;  background-size: 200% 100%;  background-image: linear-gradient(to left, red 50%, black 50%);  -webkit-animation: progressbar 1s ease infinite;  -moz-animation: progressbar 1s ease infinite;  -o-animation: progressbar 1s ease infinite;  animation: progressbar 1s ease infinite;}
.box:nth-child(2) {  animation-delay: 1s;}
.box:nth-child(3) {  animation-delay: 2s;}
@-webkit-keyframes progressbar {  0% {    opacity: 1;    background-position: 0 0;  }  100% {    opacity: 1;    background-position: -100% 0;  }}

<div class="box"></div><div class="box"></div><div class="box"></div>

CSS background-position animation not working

Here is another idea using translate on pseudo element where you make the element big to have enough room for an infinite movement:

html::before {
  content:"";
  position:fixed;
  top:0;
  left:0; /* change to right for the opposite direction */
  bottom:0;
  width:200%;
  background:url(https://i.stack.imgur.com/wJKLc.png) 0/50% auto;
  animation:move 2s linear infinite;
}

@keyframes move {
  to {transform:translateX(-50%);} /* change to "50%" for the opposite direction */
}

Change background image (color) from left to right like in a continuous motion

Fix your color-stops:

• you have a background-size of 400%
• but you use only 4 color-stops (instead of 5).

The problem: by simply animating left to right this happens with your current code:

|left                          right|       bg-position left-to-right
|#1         |#2         |#3         |#4     4 colors-stops 
|0%      |100%    |200%    |300%    |400%   bg-size
| light  |     (anim)      |  dark  |       mode
|░░░░░░░░|▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒|▓▓▓▓▓▓▓▓|          

Do you know what exact color is at 100%? No.

Do you know what exact color is at 300%? No.

See the inconsistency? The color stops are off by one.

Some possible solutions to the above:

• add one more color-stop -or
• reduce the width to 300% -or
• use CSS linear-gradient() stops at the desired % position

Suggestion

Animate a child element that has that desired background:

• Width of 400%
• 5 color-stops, where the last one matches the first!

|0%               |200%             |400%   animate left by -%
|#1      |#2      |#3      |#4      |#1     5 colors-stops 
|0%      |100%    |200%    |300%    |400%   width
| light  | (anim) |  dark  | (anim) |       mode 
|░░░░░░░░|▒▒▒▒▒▒▒▒|▓▓▓▓▓▓▓▓|▒▒▒▒▒▒▒▒|░░...

as you can see, on 400% we're back on color #1 - ideal for the loop logic! And by "animate left by -%" I mean animate the GPU accelerated transform: translateX() property value.

But wait! What if I want to animate the background-position instead of an Element child?

Isn't background-position: 100% 0; exactly the same as background-position: right 0?

Sadly, yes. 100% will not set it at its initial state (0%). The above table would make sense if we animated a child element to steps of -200% left position.

For an in-depth explanation of this (background-position) issue read: Using percentage values with background-position on a linear-gradient.

Solution

You could either:

1. Use a child element (with the background) set to 4× the width of your parent element (width: 400%;). Then in JS, move it left by -200%, and on transitionend Event you could reset its position to 0 (if goin back to Light mode) using the Modulo (Reminder) operator %.

2. Otherwise, the math for moving the background is actually in thirds:

Formula: 100 / 3 * totModes * counter

In the table below being bgX = 100 / 3 * 2 * (1) = 66.66666666666667 etc...

|0%               |66.66%           |133.33% bg-position by %
|#1      |#2      |#3      |#4      |#1      5 colors-stops 
|0%      |100%    |200%    |300%    |400%    bg-size
| light  | (anim) |  dark  | (anim) |        mode 
|░░░░░░░░|▒▒▒▒▒▒▒▒|▓▓▓▓▓▓▓▓|▒▒▒▒▒▒▒▒|░░...

Example:

// DOM utility functions:

const find = (selector, parent) => (parent || document).querySelector(selector);

// Task:

const elContainer = find("#login");
let c = 0; // position counter

const toggleDarkMode = () => {
  c += 1;
  const bgX = 100 / 3 * 2 * c;
  console.log(bgX)
  elContainer.style.backgroundPosition = `${bgX}%`;
};

find("#toggleMode").addEventListener("input", toggleDarkMode);

* {
  margin: 0;
}

.toggle-container {
  position: fixed;
  z-index: 1000;
  top: 20px;
  left: 20px;
}

.Login-container {
  background-image: linear-gradient(to right,
    #fff,
    red,
    #000,
    blue,
    #fff /*back to home*/
  );
  background-size: 400%;
  background-position: 0% 0;
  background-repeat: repeat-x;
  height: 100vh;
  transition: background 1s ease;
}

<label class="toggle-container">
  DARK MODE: <input id="toggleMode" class="toggle" type="checkbox">
</label>
<div id="login" class="Login-container"></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 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>  

---

Related Topics