Question

在下面的加载动画中，我试图创建一个“彗星”，它似乎从一侧到另一侧都在弹跳。除了将彗星的“尾巴”从左向右反弹时需要翻转之外，我几乎达到了它。

当它从右向左弹跳时，CSS渐变的角度应为90度。并且当它从左向右弹跳时，角度应为-90度。

这可能吗？

div.frame {
  width: 480px;
  margin: auto;
}

@keyframes loading-bar-animation {
    from   {margin-left: 0; width: 0}
    50% {width: 100px}
    to {margin-left: 100%; width: 0}
}

div.loading-bar {
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0,122,255,1), rgba(0,122,255,0));
  animation-name: loading-bar-animation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

<div class="frame">
  <div class="loading-bar"></div>
</div>

Answer 1

您可以将渐变更改整合到动画中。删除alternate并在关键帧中添加更多状态以创建替代效果，在该效果中您可以更改每个方向的渐变：

div.frame {
  width: 480px;
  margin: auto;
}

@keyframes loading-bar-animation {
  from {
    margin-left: 0;
    width: 0;
    background: linear-gradient(-90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
  }
  25% {
    width: 100px;
    background: linear-gradient(-90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
  }
  50% {
    margin-left: 100%;
    width: 0;
    background: linear-gradient(-90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
  }
  50.1% {
    margin-left: 100%;
    width: 0;
    background: linear-gradient(90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
  }
  75% {
    width: 100px;
    background: linear-gradient(90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
  }
  100% {
    margin-left: 0%;
    width: 0;
    background: linear-gradient(90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
  }
}

div.loading-bar {
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 122, 255, 1), rgba(0, 122, 255, 0));
  animation-name: loading-bar-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

<div class="frame">
  <div class="loading-bar"></div>
</div>

另一个想法是使用多个动画：

div.frame {
  width: 480px;
  margin: auto;
}

@keyframes loading-bar-animation {
    from   {margin-left: 0; width: 0}
    50% {width: 100px}
    to {margin-left: 100%; width: 0}
}
@keyframes change {
  0%,50% {background: linear-gradient(-90deg, rgba(0,122,255,1), rgba(0,122,255,0));}
  50.1%,100%{background: linear-gradient(90deg, red, rgba(0,122,255,0));}
}

div.loading-bar {
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0,122,255,1), rgba(0,122,255,0));
  animation-name: loading-bar-animation,change;
  animation-duration: 1s,2s;
  animation-iteration-count: infinite;
  animation-direction: alternate,normal;
  animation-timing-function: ease-in-out;
}

<div class="frame">
  <div class="loading-bar"></div>
</div>

在这种特殊情况下，缩放效果可以完成这项工作：

div.frame {
  width: 480px;
  margin: auto;
}

@keyframes loading-bar-animation {
    from   {margin-left: 0; width: 0}
    50% {width: 100px}
    to {margin-left: 100%; width: 0}
}
@keyframes change {
  0%,50% {transform:scaleX(-1)}
  50.1%,100%{transform:scaleX(1)}
}

div.loading-bar {
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0,122,255,1), rgba(0,122,255,0));
  animation-name: loading-bar-animation,change;
  animation-duration: 1s,2s;
  animation-iteration-count: infinite;
  animation-direction: alternate,normal;
  animation-timing-function: ease-in-out;
}

<div class="frame">
  <div class="loading-bar"></div>
</div>

动画方向相反时更改CSS属性

1 个答案: