Question

我正在开发一个简单的网页，我希望在提交表单时在页面中心显示一个微调器。它适用于Chrome，但在Safari中，CSS动画会在提交表单后立即停止。由于动画长达2秒，因此根本不执行动画。

这是整个HTML，CSS和JS来复制这个问题。将内容保存在HTML文件中并首先在Chrome中打开以查看其行为，然后在Safari中打开以查看问题。

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .circular {
        display: inline-block;
        height: 60px;
        left: 50%;
        margin-left: -30px;
        margin-top: -30px;
        position: fixed;
        top: 50%;  
        transform: rotate(-90deg);
        width: 60px;
      }
      .circle {
        animation: circular-indeterminate-bar-rotate 2s linear infinite;
        box-sizing: border-box;
        height: 100%;
        width: 100%;
      }
      .path {
        animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
        fill: none;
        stroke: rgba(12,18,28, 0.87);
        stroke-dasharray: 1.25, 250;
        stroke-dashoffset: 0;
        stroke-linecap: round;
        stroke-miterlimit: 20;
        stroke-width: 4;
        transition: stroke-dasharray .35s cubic-bezier(.4, 0, .2, 1);
      }

      @keyframes circular-indeterminate-bar-rotate {
        to {
          transform: rotate(1turn);
        }
      }

      @keyframes circular-indeterminate-bar-dash {
        0% {
          stroke-dasharray: 1.25, 250;
          stroke-dashoffset: 0;
        }

        50% {
          stroke-dasharray: 111.25, 250;
          stroke-dashoffset: -43.75;
        }

        to {
          stroke-dasharray: 111.25, 250;
          stroke-dashoffset: -155;
        }
      }
    </style>
  </head>
  <body>
    <div class="circular">
      <svg class="circle" viewBox="0 0 60 60"><circle class="path" cx="30" cy="30" r="25"></circle></svg>
    </div>
    <script>
      window.location.href = 'http://httpbin.org/delay/100';
    </script>
  </body>
</html>

Answer 1

这也适用于野生动物园。

.circular {
        display: inline-block;
        height: 60px;
        left: 50%;
        margin-left: -30px;
        margin-top: -30px;
        position: fixed;
        top: 50%;  
        -webkit-transform: rotate(-90deg);  
            -ms-transform: rotate(-90deg);  
                transform: rotate(-90deg);
        width: 60px;
      }
      .circle {
        -webkit-animation: circular-indeterminate-bar-rotate 2s linear infinite;
                animation: circular-indeterminate-bar-rotate 2s linear infinite;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        height: 100%;
        width: 100%;
      }
      .path {
        -webkit-animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
                animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
        fill: none;
        stroke: rgba(12,18,28, 0.87);
        stroke-dasharray: 1.25, 250;
        stroke-dashoffset: 0;
        stroke-linecap: round;
        stroke-miterlimit: 20;
        stroke-width: 4;
        -webkit-transition: stroke-dasharray .35s cubic-bezier(.4, 0, .2, 1);
        -o-transition: stroke-dasharray .35s cubic-bezier(.4, 0, .2, 1);
        transition: stroke-dasharray .35s cubic-bezier(.4, 0, .2, 1);
      }

      @-webkit-keyframes circular-indeterminate-bar-rotate {
        to {
          -webkit-transform: rotate(1turn);
                  transform: rotate(1turn);
        }
      }

      @keyframes circular-indeterminate-bar-rotate {
        to {
          -webkit-transform: rotate(1turn);
                  transform: rotate(1turn);
        }
      }

      @-webkit-keyframes circular-indeterminate-bar-dash {
        0% {
          stroke-dasharray: 1.25, 250;
          stroke-dashoffset: 0;
        }

        50% {
          stroke-dasharray: 111.25, 250;
          stroke-dashoffset: -43.75;
        }

        to {
          stroke-dasharray: 111.25, 250;
          stroke-dashoffset: -155;
        }
      }

      @keyframes circular-indeterminate-bar-dash {
        0% {
          stroke-dasharray: 1.25, 250;
          stroke-dashoffset: 0;
        }

        50% {
          stroke-dasharray: 111.25, 250;
          stroke-dashoffset: -43.75;
        }

        to {
          stroke-dasharray: 111.25, 250;
          stroke-dashoffset: -155;
        }
      }

 <div class="circular">
      <svg class="circle" viewBox="0 0 60 60"><circle class="path" cx="30" cy="30" r="25"></circle></svg>
    </div>

Safari在提交表单或重定向时暂停CSS3动画

1 个答案: