如何使用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

嗨，您可以嘗試覆蓋現有的樣式嗎？如果需要獲得舊樣式也可以將其刪除

  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));
}
    }