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>

和一个带有代码的小提琴

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

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>

​

Fiddle: 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/