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

Question

在我下面的加载动画中，我试图创建一个 "comet"，它似乎在左右弹跳。除了彗星的 "tail" 从左到右弹跳时需要翻转之外，我几乎已经实现了。

当它从右向左弹跳时，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属性

Change CSS property when animation direction is reverse

css

linear-gradients

css-animations