Les masques ne fonctionnent pas dans Gecko

Question

J'essaie de masquer un élément qui contient des images, en utilisant uniquement du css. Je l'ai fait et cela fonctionne bien dans webkit en utilisant les éléments suivants -webkit-mask-box-image et il fait exactement ce que je veux, mais j'ai des difficultés à utiliser d'autres navigateurs.

gecko est censé fonctionner en utilisant mask J'ai également essayé de convertir le png que j'utilise en données uri base64, mais sans succès.

ejemplo: http://jsfiddle.net/nNLta/

Quelqu'un connaît-il la manière correcte de procéder ?

HTML

<div id='wrap'>  
        <div class='masked flashing-anim'>  
            <div class='the-mask' >  
                <ul>  
                         <li class='blink_1'></li>  
                        <li class='blink_2'></li> 
                </ul>  
            </div>  
        </div>  
        <div class='the-outline'>  
            <img src='img/real-stuff.png' height=500 />  
        </div>  
        </div>

CSS

   #wrap {
    position: relative;
   }
   .the-outline, the-mask {
      position: absolute;
      top: 0;
   } 
   .the-mask {
        height: 500px;
        width: 360px;
        -webkit-mask-box-image: url(../img/the-mask.png);
        -moz-mask-box-image: url(../img/the-mask.png);
        -o-mask-box-image: url(../img/the-mask.png);
        mask-box-image: url(../img/the-mask.png);
        mask: url(data:lotsofchars);
    }

ejemplo: http://jsfiddle.net/nNLta/