.tab-animation > .tab-content.fade {
    opacity: 1;
}

    .fade.ng-enter {
        -moz-transition: 0.5s linear all;
        -o-transition: 0.5s linear all;
        -webkit-transition: 0.5s linear all;
        transition: 0.5s linear all;
        opacity: 0;
    }

        /* The finishing CSS styles for the enter animation */
        .fade.ng-enter.ng-enter-active {
            opacity: 1;
        }

    /* now the element will fade out before it is removed from the DOM */
    .fade.ng-leave {
        -moz-transition: 0.5s linear all;
        -o-transition: 0.5s linear all;
        -webkit-transition: 0.5s linear all;
        transition: 0.5s linear all;
        opacity: 1;
    }

        .fade.ng-leave.ng-leave-active {
            opacity: 0;
        }

/* set reference point */
.tab-animation > .tab-content {
    position: relative;
}

    /* set animate effect */
    .tab-animation > .tab-content > .tab-pane {
        -moz-transition: 0.2s linear opacity;
        -o-transition: 0.2s linear opacity;
        -webkit-transition: 0.2s linear opacity;
        transition: 0.2s linear opacity;
    }

        /* overwrite display: none and remove from document flow */
        .tab-animation > .tab-content > .tab-pane.active-remove {
            position: absolute;
            top: 0;
            width: 100%;
            display: block;
        }

        /* opacity=0 when removing "active" class */
        .tab-animation > .tab-content > .tab-pane.active-remove-active {
            opacity: 0;
        }

        /* opacity=0 when adding "active" class */
        .tab-animation > .tab-content > .tab-pane.active-add {
            opacity: 0;
        }