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

【问题标题】：Change CSS property when animation direction is reverse动画方向反转时更改 CSS 属性
【发布时间】：2018-08-16 21:02:47
【问题描述】：

在下面的加载动画中，我试图创建一个似乎在左右弹跳的“彗星”。我几乎做到了，只是彗星的“尾巴”在从左向右反弹时需要翻转。

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

【问题讨论】：

标签： css css-animations linear-gradients

【解决方案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>

【讨论】：