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

Question

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

链接：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>

Answer 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>