CSS弹跳线加载器动画 [英] CSS bouncing line loader animation

问题描述

我正在尝试创建一个简单的加载器动画，该动画来回画一条线，但目前仅在一个方向上移动.一旦到达动画的中间，它就不会沿相反的方向进行动画处理.

Im trying to create a simple loader animation that draws a line back and forth but currently is moving only in one direction. As soon as it reaches the middle of the animation it does not animate in the oposite direction.

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

有人可以告诉我我在做什么错吗?

Can someone tell me what I'm doing wrong?

推荐答案

这是因为您在49%和50%之间有很大的休息时间.

It is because you have a heavy break between 49% and 50%.

 49% {
     width: 100%;
 }

 50% {
     left: 100%;
 }

将left添加到49%，并调整width，left等的一些属性，会产生令人敬畏的脉动效果:

Adding the left to the 49%, and adjusting a few properties of width, left, etc. gives you an awesome pulsating effect:

@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/

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

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

If you need a pulsating effect, you need to use two extremes:

@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>

这篇关于CSS弹跳线加载器动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！