Angular JS - Animating md-chips element on enter and leave - angularjs

Question

I'm trying to animate chips created by md-chips, angular-material, but it does not work.
here is my css codes:
#-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
#keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
#-webkit-keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
#keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
.md-chip.ng-enter {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
.md-chip.ng-leave {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}
and HTML:
<md-chips class="custom-chips" ng-show="elems.length" ng-model="elems" readonly="true">
<md-chip-template>
<span>
<strong>{{$chip.name}}</strong>
</span>
</md-chip-template>
<button md-chip-remove class="md-primary">
<md-icon md-svg-icon="md-close"></md-icon>
</button>
</md-chips>
but no animation showing and everything goes normal!
I read some tutorials and whatever they said step by step but i think it's not gonna work with md-chips work some reasons.

Answer 1

You need to specify a duration, for example:
.md-chip.ng-enter {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
Or simply:
.md-chip.ng-enter {
-webkit-animation: zoomIn 1s;
animation: zoomIn 1s;
}
Demo: http://plnkr.co/edit/L36jyc3WFW9cRuu4Cybs?p=preview

Answer 2

To elaborate on tasseKATT's answer, if you add max-height property to the animation to go from max-height: 0px; to max-height: 50px; (for example), then the content will not be so jumpy when a the last chip from a row is removed, or when another chip is added and it creates another row.
See sample below for css and the demo on Plunker (just a fork):
#-webkit-keyframes zoomIn {
from {
max-height: 0px;
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
max-height: 50px;
opacity: 1;
}
}
#keyframes zoomIn {
from {
max-height: 0px;
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
max-height: 50px;
opacity: 1;
}
}
#-webkit-keyframes zoomOut {
from {
max-height: 50px;
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
max-height: 0px;
opacity: 0;
}
}
#keyframes zoomOut {
from {
max-height: 50px;
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
max-height: 0px;
opacity: 0;
}
}
.md-chip.ng-enter {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation: zoomIn 1s;
animation: zoomIn 1s;
}
.md-chip.ng-leave {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}