如何使用jQuery（或JavaScript）来设置关键帧50％？

Question

我做的时间（秒）吧。

当打开页，栏的宽度应为（秒/ 60）* 100％。

我想从50％，而不是从头开始。

使用jQuery或JavaScript。

请告诉我。

                    #loader {
                    width: 50%;
                    height: 5px;
                    background-color: #fff;
                    animation-name: loadingBar;
                    animation-duration: 60s;
                    animation-timing-function: steps(60, end);
                    animation-direction: normal;
                    animation-play-state: running;
                    animation-iteration-count: infinite;

                    @keyframes loadingBar {
                        0% {
                            width: 0%;                            
                        }

                        100% {
                            width: 100%;
                        }
                    }

Answer 1

嗨你能尝试这种覆盖式的，如果需要得到旧的行为existing.And也删除

  function setStyle() {
      let st = document.createElement("style");
      st.id="RemoveMeInFuture";
        const stext=`@keyframes loadingBar {
                        50% {
                            width: 0%;                            
                        }

                        100% {
                            width: 100%;
                        }
                    }

                    .foo{background:red}`;
      document.querySelector("head").appendChild(st);
      if (st.styleSheet){
  // This is required for IE8 and below.
  st.styleSheet.cssText = stext;
} else {
  st.appendChild(document.createTextNode(stext));
}
    }