Probleme de transition

Bonsoir,
Je viens vers vous car j'ai un petit souci qui je pense pourtant ne doit pas étre si compliqer :s
Je m'explique:
Losque que je clique sur un element j'ajoute une classe .active a un autre element, cette classe le fait apparaitre tout au dessus de la page avec un background-color a rgba(0,0,0,0.8), mais je voudrait que le background vienne progressivement sur 0.5s, je penait donc utiliser les transitions, mais sa ne fonctionne pas, je vous mt mon code:
structure html:

<div class="button" id="button">...</div>
<div class="voile" id="voile">
       <div class="voile-content">
                ...
          </div>
</div>

css:

.voile {
   display: none;
   position: fixed;
   top:0;
   left:0;
   width:100%;
   height:100%;
   z-index: 1000;
   background-color: rgba(0,0,0,0);
   @include transition (background-color 0.5s);

       &.active {
           display: block;
            background-color: rgba(0,0,0,0.8);

            .voile-content {
                   ...
               }
         }
}

et le js:

jQuery(document).ready(function($){
   $("#button").click(function(){
            $("#voile").addClass("active");

   });
});

voila pour le code, du coup sa fonctionne correctement sauf le rendu du background-color qui au lieu de mettre 0.5s avec la transition pour s'afficher, s'affiche tout de suite en rgba(0,0,0,0.8) alors que je voudrais qu'il s'affiche progressivement :s

Merci pour votre aide, j'ai eu beau retourner le probléme dans tout les sens je n'est pas trouver :s

merci a vous Smiley cligne