一个CSS动画的demo

    

  .lineBarDis {
        height: 8px;
        background-image: linear-gradient(to right, #011c72 0%, #c7ced2 100%);
        animation: myAnimation 1.5s infinite; /* 设置动画为2秒钟的时间，并无限循环 */
      }

      @keyframes myAnimation {
        0% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 0%);
        }
        10% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 10%);
        }
        20% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 20%);
        }
        30% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 30%);
        }
        40% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 40%);
        }
        50% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 50%);
        }
        60% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 60%);
        }
        70% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 70%);
        }
        80% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 80%);
        }
        90% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 90%);
        }
        100% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 100%);
        }
      }