.fromTopIn {
    transition: transform 1s ease, opacity 1s ease;
    transform: translate(0, 0);
    opacity: 1
}

.fromTopOut {
    transition: transform 1s ease, opacity 1s ease;
    transform: translate(0, -10px);
    opacity: 0
}

.fromBottomIn {
    transition: transform 1s ease, opacity 1s ease;
    transform: translate(0, 0);
    opacity: 1
}

.fromBottomOut {
    transition: transform 1s ease, opacity 1s ease;
    transform: translate(0, 10px);
    opacity: 0
}

.fromLeftIn {
    transition: transform 1s ease, opacity 1s ease;
    transform: translate(0, 0);
    opacity: 1
}

.fromLeftOut {
    transition: transform 1s ease, opacity 1s ease;
    transform: translate(-10px, 0);
    opacity: 0
}

.fromRightIn {
    transition: transform 1s ease, opacity 1s ease;
    transform: translate(0, 0);
    opacity: 1
}

.fromRightOut {
    transition: transform 1s ease, opacity 1s ease;
    transform: translate(10px, 0);
    opacity: 0
}

.scaleUpIn {
    transition: transform 1s ease, opacity 1s ease;
    transform: scale(1.0, 1.0);
    opacity: 1
}

.scaleUpOut {
    transition: transform 1s ease, opacity 1s ease;
    transform: scale(1.3, 1.3);
    opacity: 0
}

.scaleDownIn {
    transition: transform 1s ease, opacity 1s ease;
    transform: scale(1.0, 1.0);
    opacity: 1
}

.scaleDownOut {
    transition: transform 1s ease, opacity 1s ease;
    transform: scale(0.7, 0.7);
    opacity: 0
}