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

// Plop Entrances
@keyframes tdPlopIn {
    0% { 
        opacity: 0;
        transform: scale(0.9,0.9);
    }
    10% {
        opacity: 1;
        transform: scale(0.7,1.3);
    }
    70% {
        transform: scale(1.1,0.95);
    }
    90% {
        transform: scale(0.97,1.05);
    }
    100% { 
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes tdPlopInDown {
    0% { 
        opacity: 0;
        transform: scale(0.9,0.8);
        transform-origin: center top;
    }
    10% {
        opacity: 1;
        transform: scale(0.8,1.3);
        transform-origin: center top;
    }
    70% {
        transform: scale(1,0.95);
        transform-origin: center top;
    }
    100% { 
        opacity: 1;
        transform: scale(1);
        transform-origin: center top;
    }
}

@keyframes tdPlopInUp {
    0% { 
        opacity: 0;
        transform: scale(0.9,0.8);
        transform-origin: center bottom;
    }
    10% {
        opacity: 1;
        transform: scale(0.8,1.3);
        transform-origin: center bottom;
    }
    70% {
        transform: scale(1,0.95);
        transform-origin: center bottom;
    }
    100% { 
        opacity: 1;
        transform: scale(1);
        transform-origin: center bottom;
    }
}

.tdPlopIn() {
    animation-name: tdPlopIn;
}
.tdPlopInDown() {
    animation-name: tdPlopInDown;
}
.tdPlopInUp() {
    animation-name: tdPlopInUp;
}