javascript - 如何使用 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));
}
    }