.c001 {
  position: relative;
  /*color: transparent;*/
  color: #FFF;
  font-size:clamp(14px,4vw,50px);
  padding:10px;
}
.c001::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0%;
  right: 100%;
  bottom: 0%;
  left: 0%;
  background: #FF9933/*最初の色*/
}
.c001.active {
  animation-name: kf_c001a;
  animation-duration: 0s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}
.c001.active::before {
  animation-name: kf_c001b;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes kf_c001a {
  100% {
    color: #FFF;
	background: rgba(50, 127, 197, 1.0);/*最後の色*/
  }
}
@keyframes kf_c001b {
  50% {
    left: 0%;
    right: 0%;
  }
  100% {
    left: 100%;
    right: 0%;
  }
}