Efeito do painel-animado não funcionou. | AngularJS: crie webapps poderosas

O css funcionou ate na parte do transform, quando foi pra parte do transition ele não mudou, continua agindo como se tivesse só a parte do transform. O que pode esta acontecendo ? Segue código abaixo:

.painel-animado.ng-leave-active {
  -moz-transform: scale(0.1);
  -webkit-transform: scale(0.1);
  -ms-transform: scale(0.1);
  -o-transform: scale(0.1);
  transform: scale(0.1);
}

 .painel-animado {
    -moz-transition:transform 0.8s;
    -webkit-transition:transform 0.8s;
    -ms-transition:transform 0.8s;
    -o-transition:transform 0.8s;
    transition:transform 0.8s;
}

Agora html


<!DOCTYPE html>
<html lang="pt-br" ng-app="alurapic">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Alurapic</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/efeitos.css">
        <script src="js/lib/angular.min.js"></script>
        <script src="js/main.js"></script>
        <script src="js/controllers/fotos-controller.js"></script>
        <script src="js/directives/minhas-diretivas.js"></script>
    </head>
    <body ng-controller="FotosController">
        <div class="container">
            <div class="jumbotron">
                <h1 class="text-center">Alurapic</h1>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <form>
                        <input ng-model="filtro" class="form-control" placeholder="filtrar">
                    </form>
                </div>
            </div>

            <div class="row">
                <meu-painel class="col-md-2 painel-animado" ng-repeat="foto in fotos | filter: filtro" titulo="{{foto.titulo}}">
                    <img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">              
                </meu-painel>
            </div>

        </div> <!-- fim container -->        
    </body>
</html>

PRORROGAMOS O DESCONTO!