@import (reference) '../imports/_easing.less';
@import (reference) '../imports/_mixins.less';

// Shrink Entrances
@keyframes tdShrinkIn {
    0% { 
        opacity: 0;
        transform: scale(1.2);
        animation-timing-function: @easeOutCirc;
    }
    100% { 
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes tdShrinkInBounce {
    0% { 
        opacity: 0;
        transform: scale(1.2);
        animation-timing-function: @easeOutCirc;
    }
    70% {
        transform: scale(0.95);
        animation-timing-function: ease;
    }
    100% { 
        opacity: 1;
        transform: scale(1);
    }
}

.tdShrinkIn() {
    animation-name: tdShrinkIn;
}
.tdShrinkInBounce() {
    animation-name: tdShrinkInBounce;
}

// Shrink Exits
@keyframes tdShrinkOut {
    0% { 
        opacity: 1;
        transform: scale(1);
        animation-timing-function: @easeOutCirc;
    }
    100% { 
        opacity: 0;
        transform: scale(0.85);
        animation-timing-function: ease;
    }
}

@keyframes tdShrinkOutBounce {
    0% { 
        opacity: 1;
        transform: scale(1);
        animation-timing-function: @easeOutCirc;
    }
    30% {
        opacity: 1;
        transform: scale(1.03);
        animation-timing-function: ease;
    }
    100% { 
        opacity: 0;
        transform: scale(0.85);
        animation-timing-function: ease;
    }
}

.tdShrinkOut() {
    animation-name: tdShrinkOut;
}
.tdShrinkOutBounce() {
    animation-name: tdShrinkOutBounce;
}