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/

CSS弹跳线加载器动画

2 个答案: