Question

请查看我的代码它的纯css动画哪一个在Firefox中不起作用。请帮我处理firefox。进度动画不适用于当前代码，请帮助我正常工作。

<!DOCTYPE html>
    <html>
    <head><meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <style> 
    progress:not([value]) {
       /* Styling here */
    }

    progress[value] {
      /* Reset the default appearance */

      -webkit-appearance: none;
         -moz-appearance: none;
       appearance: none;

      /* Get rid of default border in Firefox. */
      border: none;

      /* Dimensions */
      width: 250px;
      height: 20px;
    }

    progress[value]::-moz-progress-bar { 
     /* background:green;*/
      border-radius: 2px; 

      animation: animate-stripes 5s forwards;
    }

progress[value]::-webkit-progress-value {
    background:green;   
    border-radius: 2px; 

    -webkit-animation: animate-stripes 5s forwards;
    -moz-animation: animate-stripes 5s forwards;
        animation: animate-stripes 5s forwards;

}
    @-webkit-keyframes animate-stripes {
        0% {  width: 0%; }
    } 
    @-moz-keyframes animate-stripes {
        0% {  width: 0%; }
    }
    @keyframes animate-stripes {
        0% {  width: 0%; }
    }
    </style>
    </head>
    <body>
    <progress max="100" value="75"><strong>Votes 24 %</strong></progress>

    </body>
    </html>

感谢任何帮助。

进度条动画无法在Firefox上运行

0 个答案: