animate-enter,
.animate-leave {
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
}

.animate-leave.animate-leave-active,
.animate-enter {
    -webkit-transform: rotateX(90deg) rotateZ(90deg);
    -moz-transform: rotateX(90deg) rotateZ(90deg);
    -ms-transform: rotateX(90deg) rotateZ(90deg);
    -o-transform: rotateX(90deg) rotateZ(90deg);
    transform: rotateX(90deg) rotateZ(90deg);
    opacity: 0;
    height: 0px;
}

.animate-enter.animate-enter-active,
.animate-leave {
    -webkit-transform: rotateX(0deg) rotateZ(0deg);
    -moz-transform: rotateX(0deg) rotateZ(0deg);
    -ms-transform: rotateX(0deg) rotateZ(0deg);
    -o-transform: rotateX(0deg) rotateZ(0deg);
    transform: rotateX(0deg) rotateZ(0deg);
    opacity: 1;
    height: 30px;
}
/* .item.style1{width: 25%}
.item.style2{width: 50%}
.item.style3{width: 25%}
.item.style4{width: 50%} */