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

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>