Como posso sequenciar animações - angularjs

Eu tenho tentado obter uma seqüência de duas animações em execução, mas eu estou ficando muito irritado como eu simplesmente não consigo fazer isso funcionar! Eu preciso desvanecer um div e, em seguida, deslize-o para a direita. Fade in é fácil usando :

.fadein.ng-hide-remove {
animation: 0.8s appear;
display: block!important;
}

.fadein.ng-hide-remove.ng-hide-remove-active {
opacity:1;
}

@keyframes appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

e

<div id="settings" ng-show="settingsPanel" class="fadein"></div>

e

$scope.showSettings = function(){
$scope.settingsPanel = true;
}

Configurações parece com isso:

#settings {
background:#353734;
position:fixed;
top:0;
bottom:0;
left:-280px;
width:500px;
z-index:100;
}

Eu terminei de deslizar também de forma semelhante, mas fazê-los acionar um após o outro está se mostrando impossível para mim. Alguém poderia me mostrar como fazer isso, por favor?

Respostas:

Que tal usar quadros-chave da seguinte forma:

#settings {
background:#353734;
position:fixed;
top:25px;
bottom:0;
left:0px;
width:200px;
z-index:100;
}

.fadein.ng-hide-remove {
animation: 2.8s appear;
display: block!important;
}

@keyframes appear {
0% {
left: -100px;
opacity: 0;
}
50% {
left: -100px;
opacity: 1;
}
100% {
left: 0;
opacity: 1;
}
}

Veja o violino de trabalho aqui: http://jsfiddle.net/HB7LU/20650/

Por que não definir quadros-chave para animações e simplesmente definir diferentes etapas para cada animação. Pouco como esta

@keyframes slide-right {
0% {
left: -450px;
}
100% {
left: 0;
}
}