.fade e .painel-animado

Olá! Consegui fazer a tarefa de acordo com o que foi apresentado, mas me surgiu uma dúvida. Porque não consigo alcançar o efeito usando apenas o .fade, como apresentado inicialmente na aula? Como fazer pra utilizar apenas 1 palavra?

HTML

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

CSS

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

.fade.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);
}