Css 动画从左到右，然后消失，然后从右到左。等等答案

【问题标题】：Css animation from left to right, then disappear, then right to left. and so onCss 动画从左到右，然后消失，然后从右到左。等等
【发布时间】：2018-09-06 15:02:57
【问题描述】：

我想要从左到右的蓝线动画。然后它消失，然后橙色线从右到左，依此类推。

链接：https://jsfiddle.net/anilchauhan999/8zw59v4j/3/

请帮忙。下面是代码：

/* ================================ */

.c-logo-box{
     overflow: hidden;
     position: relative;
   display: inline-block;
   width: 220px;
   min-height: 60px;
}

.border-bar {
  position: relative;
  width: 100%;
  height: 3px;
  background-color: transparent;
}
.b-bar {
  content: "";
  display: inline;
  position: absolute;
  width: 0;
  height: 100%;
  left: 50%;
  text-align: center;
  animation: loading 3s linear infinite;
  -webkit-animation: loading 3s linear infinite;
}

@keyframes loading {
    from {left: 0; width: 0; background-color: #f5a622;}
    33.3333% {left: 0; width: 100%; background-color: #002255}

  36%{left: 0; width: 100%;background-color: transparent}

    to  {left: 0;z-index:100; background-color: #002255}
    40%{left:0;background-color: #f5a622}

}

 <div class="c-logo-box">                               
   <div class="border-bar ">
       <div class="b-bar "></div>
   </div>
  </div>

【问题讨论】：

Here is the link: 在哪里？
jsfiddle.net/anilchauhan999/8zw59v4j/3
在下面查看我的答案
@Anuresh 但我不想这样。橙色需要从右到左开始。
I want the animation of Blue line from left to right. then it disappear and then Orange line from right to left and so on. ...?

标签： css animation infinite

【解决方案1】：

您的@keyframes 有点复杂。我修改了。

.c-logo-box{
	overflow: hidden;
	position: relative;
	display: inline-block;
	width: 220px;
	min-height: 60px;
}

.border-bar {
  position: relative;
  width: 100%;
  height: 3px;
  background-color: transparent;
}
.b-bar {
  content: "";
  display: inline;
  position: absolute;
  width: 0;
  height: 100%;
  left: 50%;
  text-align: center;
  animation: loading 4s linear infinite forwards;
}

@keyframes loading {
    0% {left: 0; width: 0; background-color: #002255;}
   25% {left: 0; width: 100%; background-color: #002255}
   50% {left: 0; width: 0; background-color: #002255}
   51% {left: 0; width: 0; background-color: #f5a622}
   75% {left: 0; width: 100%; background-color: #f5a622}
   100% {left: 0; width: 0; background-color: #f5a622}
}

<div class="c-logo-box">                               
   <div class="border-bar ">
       <div class="b-bar "></div>
   </div>
  </div>

【讨论】：