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

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