10分钟Timerbar Css3动画时序

Question

此css3计时器栏的完成时间存在问题。在最近使用mozilla进行的测试中，它运行良好。但是，在ipad上它慢了大约25秒。我的下一次尝试是添加更多@keyframe百分比。但是，每次测试需要10分钟，所以最好先在这里询问。

    .timerbar {
      height: 60px;
      width: 100%;
      background: #484949;
      position: fixed;
      top: 0;
      z-index: 500;
    }
    .shrinking{
        width: 100%;
        height: 60px;   
        position: absolute;
        top: 0;
        z-index: -1;
        -webkit-transform: translateZ(0);
        /*activate the 3D rendering engine.*/

    /*    animation: fillBar 1s ease-in infinite; */
        -webkit-animation-name: fillBar;
            animation-name: fillBar;
        -webkit-animation-duration: 600s;
                animation-duration: 600s;
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
        -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1;
        -webkit-animation-direction: normal;
                animation-direction: normal;
        background-image: linear-gradient(to right, #1B676B, #519548);  
    }

    @-webkit-keyframes fillBar {
          0% {
            width: 100%;
                -webkit-animation-timing-function: linear;
                -webkit-animation-direction: normal;
          }
          100% {
            width: 0%;
                -webkit-animation-timing-function: linear;
                -webkit-animation-direction: normal;
          }
      }
      @keyframes fillBar {
          0% {
            width: 100%;
                animation-timing-function: linear;
                animation-direction: normal;
          }
          100% {
            width: 0%;
                animation-timing-function: linear;
                animation-direction: normal;
          }
      }

安装了normalize和modernizer。此代码正在rails项目上运行。每次测试都会清除缓存。