animate background-position to continuously move horizontally

Question

I want to move my background using css horizontally.

I've looked at this demo, but they're using an actual image. I want to be able to use rgba / linear-gradient instead.

This is my code:

.chat {
  width: 490px;
  float: left;
  background: #F2F5F8;
  color: #434651;
  position:absolute;
  overflow:hidden;
}
@keyframes animatedBackground {
 from { background-position: 0 0; }
 to { background-position: 100% 0; }
}
.chat .chat-header {
  /* padding: 20px; */
  border-bottom: 2px solid white;
  background-image: linear-gradient(135deg, #FF5572, #FF7555);
  width:1000px; /*make bigger in order to move */
  overflow:hidden;
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 4s linear infinite;
}

 <div class="chat">
   <div class="chat-header clearfix">
       <div class="chat-about">
       hi
       </div>
   </div>
 </div>

I want it to animate in the same way as in the demo. How would i achieve that?

https://css-tricks.com/i-like-how-percentage-background-position-works/ — Temani Afif, Jul 02 '18 at 12:40

score 0 · Answer 1 · answered Jul 02 '18 at 12:36

.chat {
    background: linear-gradient(134deg, #ff5572, #ff7555);
    background-size: 400% 400%;
    animation: Move 4s ease infinite;
}

@keyframes Move { 
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

There's a great tool for playing around with gradient animations at https://www.gradient-animator.com/

score 0 · Accepted Answer · answered Jul 02 '18 at 12:42

You can use background position to translate it through the image background like the example..

.chat {
  width: 490px;
  float: left;
  background: #F2F5F8;
  color: #434651;
  position:absolute;
  overflow:hidden;
}
@keyframes animatedBackground {
 0% {
  background-position: 0% 0%
 }
 50% {
  background-position: 0% 100%
 }
 100% {
  background-position: 0% 0%
 }
}
.chat .chat-header {
  /* padding: 20px; */
  border-bottom: 2px solid white;
  background-image: linear-gradient(180deg, #FF5572, blue, #FF5572);
  width:1000px; /*make bigger in order to move */
  overflow:hidden;
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 4s linear infinite;
  margin:0;
  height:400px;
  background-size: 100% 400%;
}

<div class="chat">
   <div class="chat-header clearfix">
       <div class="chat-about">
       hi
       </div>
   </div>
 </div>

he's already using background-position like you can see in his code — Temani Afif, Jul 02 '18 at 12:44

animate background-position to continuously move horizontally

2 Answers2