1

HTML

<progress max="100" value="80"></progress>

CSS

progress[value]
{
    /* Reset the default appearence */
    -moz-appearance: none;
         appearance: none;

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

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

progress[value]::-moz-progress-bar 
{ 
    background-image: -moz-linear-gradient( 135deg, 
                                            transparent 33%, 
                                            rgba(0, 0, 0, .1) 33%, 
                                            rgba(0, 0, 0, .1) 66%, 
                                            transparent 66% ),
                      -moz-linear-gradient( top, 
                                            rgba(255, 255, 255, .25), 
                                            rgba(0, 0, 0, .25) ),
                      -moz-linear-gradient( left, #09c, #f44 );

   border-radius: 2px; 
   background-size: 35px 20px, 100% 100%, 100% 100%;

   -moz-animation: animate-stripes 5s linear infinite;
        animation: animate-stripes 5s linear infinite;
}

@-moz-keyframes animate-stripes { 100% { background-position: 100px 0px; } }
     @keyframes animate-stripes { 100% { background-position: 100px 0px; } }

デモ(このリンクは Firefox でのみ開く)

http://jsfiddle.net/pankajparashar/CQGQ9/

問題

背景の位置を変更することにより、firefox で css3 キーフレームを使用して背景のストライプをアニメーション化しようとしています。ただし、これは firefox では機能しません。上記のコードは、firefox 専用に作成された簡易テスト ケースです。

4

0 に答える 0