CSS弹跳线加载器动画

Question

我试图创建一个简单的加载器动画来回绘制一条线,但目前只在一个方向上移动.一旦到达动画的中间,它就不会在相反方向上制作动画.

这是我的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>

还有一个代码的jsfiddle

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

Answer 1

这是因为你49%和之间的关系很重50%.

 49% {
     width: 100%;
 }

 50% {
     left: 100%;
 }

添加left到49%,和调整的一些属性width,left等等给你一个真棒脉动效果:

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

片段

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>

小提琴:http://jsfiddle.net/praveenscience/06w7zwwm/

如果你需要脉动效果,你需要使用两个极端:

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

片段

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>

Answer 2

我稍微改变了你的代码，设法让它工作。这是我更改的内容：

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

添加overflow: hidden;到.loader

添加width: 100%;到.loader .bar

http://jsfiddle.net/wbyzy9jL/5/