主页 / 问题 / 1439659
Accepted
Inventor
Asked:2022-08-16 05:14:47 +0000 UTC2022-08-16 05:14:47 +0000 UTC

为什么动画在 50% 处暂停？css

  • 772

.wrapper {
  width: 300px;
  height: 50px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(1,1,1,0.3);
}

.loading_attr {
  height: 3px;
  background: #9758A7;
  position: absolute;
  top: 0;
  left: 0;
  animation-name: loading_attr_animation;
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
}

@keyframes loading_attr_animation {
  0% {
    left: 0;
    width: 10%;
  }
  50% {
    left: 30%;
    width: 30%;
  }
  100% {
    width: 10%;
    left: 100%;
  }
}
<div class="wrapper">
  <div class="loading_attr"></div>
<div>

为什么动画在 50% 处暂停并在几毫秒后继续？我希望紫色条在动画的整个迭代过程中以相同的速度不间断

javascript html

1 个回答

  1. Best Answer

    你需要一个属性animation-timing-function。

    .wrapper {
  width: 300px;
  height: 50px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(1,1,1,0.3);
}

.loading_attr {
  height: 3px;
  background: #9758A7;
  position: absolute;
  top: 0;
  left: 0;
  animation-name: loading_attr_animation;
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
  animation-timing-function: linear;
}

@keyframes loading_attr_animation {
  0% {
    left: 0;
    width: 10%;
  }
  50% {
    left: 30%;
    width: 30%;
  }
  100% {
    width: 10%;
    left: 100%;
  }
}
    <div class="wrapper">
  <div class="loading_attr"></div>
<div>

    • 1

相关问题