CODEWITHSUNDEEP
htmlcssanimation
Sledmore
Sledmore

Reputation: 290

CSS3 infinitely looping animation

I'm having a little issue with a CSS3 animation I'm trying to do.

I'm trying to do a road animation, where the lines / markers move. Right now it currently works, however not how I'd like.

I need the markers to move from their current position (not from the right - the keyframe makes them come from the right), they would be moving to the left. I also need them to constantly loop & not reset, but I am unsure on how to do that.

body {
  margin: 0 auto;
}
#road {
  height: 75px;
  background: #666666;
  overflow: hidden;
}
.line {
  width: 150px;
  height: 15px;
  background-color: #cccbcb;
  margin: 30px 75px 0 0;
  display: inline-block;
  -webkit-animation: road infinite linear 4s 0s;
}

@keyframes road {
  0% { transform: translateX(1000%); }
  100% { transform: translateX(0%); }
}
<div id="road">
  <div style="width: 100%;">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
</div>

Demo link: https://jsfiddle.net/ke4zzjg3/

Any ideas?

Upvotes: 0

Views: 110

Answers (1)

Kalhenyan
Kalhenyan

Reputation: 56

Can you remove the div wrapper (width: 100%;) ? You can set #road to 100% width

You can set #road in display: flex with adjustments like flex-flow for direction & wrapping and align-items for center.

line element have 150px width so you can set your translateX at 100% to -150% (like 150px) -> at the end of you keyframe the first line will be hidden. You have to set the transform property also in your class properties.

When the animation end, the second line is at the same position as the first line without the animation, so you can't see the change. :)

Adjust the speed of the road like you want in your animation property. If you want to invert the direction of the lines, just invert the translate properties.

body {
  margin: 0 auto;
  overflow: hidden;
}
#road {
  width: 1000%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  
  height: 75px;
  background: #666666;
  overflow: hidden;
}
.line {
  width: 150px;
  height: 15px;
  background-color: #cccbcb;
  margin: 0 37.5px;
  animation: road infinite linear 2s 0s;
  
  transform: translateX(0%);
}

@keyframes road {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-150%); }
}
<div id="road">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
</div>

Upvotes: 3

Related Questions