.fromLeft,
.fromTop,
.frombottom,
.fromright {
    /* position:absolute; */

}

.vertical {
    transform: scale(1, 0);
    opacity: 0;
    transition: transform .9s ease-in-out, opacity .7s linear;
}

.horizontal {
    transform: scale(0, 1);
    opacity: 0;
    transition: transform .9s ease-in-out, opacity .7s linear;
}

.vertical.entry-scale,
.horizontal.entry-scale {
    opacity: 1;
    transform: scale(1);
}

.fromTop {
    opacity: 0;
    transform: translateY(-20px);
}

.toRight {
    transform: translateX(-20px);
    opacity: 0;
}


.toLeft {
    transform: translateX(20px);
    opacity: 0;
}

.fromBottom {
    transform: translateY(50px);
    opacity: 0;
}

.animate {
    transform: none;
    opacity: 1;
    transition: transform .5s ease-in-out, opacity 1s linear;
}

.fromTop.animate, .toRight.animate{
    transform: none;
    opacity: 1;
    transition: transform 1.5s ease-in-out, opacity 0.7s linear;
}

.fromOpacity {
    opacity: 0;
}

.fromOpacity.animate {
    opacity: 1;
    transition: opacity .5s ease-in-out;
}

/* задержка появления для последовательных элементов */
.fromBottom.animate:nth-child(1),
.toRight.animate:nth-child(1),
.fromOpacity.animate:nth-child(1),
.toLeft.animate:nth-child(1) {
    transition-delay: 0s;
}
.fromBottom.animate:nth-child(2),
.toRight.animate:nth-child(2),
.fromOpacity.animate:nth-child(2),
.toLeft.animate:nth-child(2) {
    transition-delay: 0.2s;
}
.fromBottom.animate:nth-child(3),
.toRight.animate:nth-child(3),
.fromOpacity.animate:nth-child(3),
.toLeft.animate:nth-child(3) {
    transition-delay: 0.4s;
}