CSS 弹跳线加载动画

我正在尝试创建一个简单的加载动画，来回绘制一条线，但目前仅朝一个方向移动。一旦到达动画的中间，它就不会以相反的方向动画。

这是我的CSS

@keyframes loader-animation {
     0% {
          width: 0%;
     }

     49% {
         width: 100%;
     }

     50% {
         left: 100%;
     }

     100% {
         left: 0%;
         width: 100%
     }
 }

 .loader {
     height: 5px;
     width: 100%;
 }

 .loader .bar {
     position: relative;
     height: 5px;
     background-color: dodgerblue;
     animation-name: loader-animation;
     animation-duration: 3s;
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
 } 

还有我的html

<div class="loader">
    <div class="bar"></div>
</div>

And a jsfiddle http://jsfiddle.net/devconcept/wbyzy9jL/3/与代码

有人可以告诉我我做错了什么吗？

这是因为你们之间有一个重大的休息时间49% and 50%.

 49% {
     width: 100%;
 }

 50% {
     left: 100%;
 }

添加left to the 49%，并调整一些属性width, left等给你一个很棒的脉动效果：

@keyframes loader-animation {
    0% {
        width: 0%;
    }
    49% {
        width: 100%;
        left: 0%
    }
    50% {
        left: 100%;
    }
    100% {
        left: 0%;
        width: 100%
    }
}

Snippet

body {margin: 0; padding: 0;}
@keyframes loader-animation {
  0% {
    width: 0%;
  }
  49% {
    width: 100%;
    left: 0%
  }
  50% {
    left: 100%;
    width: 0;
  }
  100% {
    left: 0%;
    width: 100%
  }
}
.loader {
  height: 5px;
  width: 100%;
}
.loader .bar {
  position: absolute;
  height: 5px;
  background-color: dodgerblue;
  animation-name: loader-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

<div class="loader">
  <div class="bar"></div>
</div>

Fiddle: http://jsfiddle.net/praveenscience/06w7zwwm/ http://jsfiddle.net/praveenscience/06w7zwwm/

如果需要脉动效果，则需要使用两个极端：

@keyframes loader-animation {
    0% {
        left: -100%;
    }
    49% {
        left: 100%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: -100%;
    }
}

Snippet

body {margin: 0; padding: 0; overflow: hidden;}
@keyframes loader-animation {
  0% {
    left: -100%;
  }
  49% {
    left: 100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
}
.loader {
  height: 5px;
  width: 100%;
}
.loader .bar {
  width: 100%;
  position: absolute;
  height: 5px;
  background-color: dodgerblue;
  animation-name: loader-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

<div class="loader">
  <div class="bar"></div>
</div>