.ani-event {
    opacity: 0;
}
.ani-event[data-type="children"] {
    opacity: 1;
}
.ani-event[data-type="children"] > * {
    opacity: 0;
}

.slide-leftRight {
    opacity: 1;
    transform: translateX(-100vw);
}
.slide-leftRight.on {
    -webkit-animation-name: slide-leftRight;
    animation-name: slide-leftRight;
    animation-duration: 2s;
    transform: translateX(0);
}

@keyframes slide-leftRight {
    0%, 20% {
        -webkit-transform: translateX(-100vw);
        transform: translateX(-100vw);
    }
    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
}
@-webkit-keyframes slide-leftRight {
    0%, 20% {
        -webkit-transform: translateX(-100vw);
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0px);
        transform: translateY(0px);
        opacity: 1;
    }
}

.slide-rightLeft {
    opacity: 1;
    transform: translateX(100vw);
}
.slide-rightLeft.on {
    -webkit-animation-name: slide-rightLeft;
    animation-name: slide-rightLeft;
    animation-duration: 2s;
    transform: translateX(0);
}

@keyframes slide-rightLeft {
    0%, 20% {
        -webkit-transform: translateX(100vw);
        transform: translateX(100vw);
    }
    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
}
@-webkit-keyframes slide-rightLeft {
    0%, 20% {
        -webkit-transform: translateX(100vw);
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0px);
        transform: translateY(0px);
        opacity: 1;
    }
}

.slideFadein-leftRight {
    opacity: 0;
}
.slideFadein-leftRight.on {
    -webkit-animation-name: slideFadein-leftRight;
    animation-name: slideFadein-leftRight;
    opacity: 1;
    animation-duration: 1s;
}

@keyframes slideFadein-leftRight {
    0%, 20% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
        opacity: 1;
    }
}
@-webkit-keyframes slideFadein-leftRight {
    0%, 20% {
        -webkit-transform: translateX(-100px);
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0px);
        transform: translateY(0px);
        opacity: 1;
    }
}

.slideFadein-rightLeft {
    opacity: 0;
}
.slideFadein-rightLeft.on {
    -webkit-animation-name: slideFadein-rightLeft;
    animation-name: slideFadein-rightLeft;
    opacity: 1;
    animation-duration: 1s;
}

@keyframes slideFadein-rightLeft {
    0%, 20% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
        opacity: 1;
    }
}
@-webkit-keyframes slideFadein-rightLeft {
    0%, 20% {
        -webkit-transform: translateX(100px);
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0px);
        transform: translateY(0px);
        opacity: 1;
    }
}

.slideFadein-bottomTop {
    opacity: 0;
}
.slideFadein-bottomTop.on {
    -webkit-animation-name: slideFadein-bottomTop;
    animation-name: slideFadein-bottomTop;
    opacity: 1;
    animation-duration: 1s;
}

@keyframes slideFadein-bottomTop {
    0%, 20% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }
}
@-webkit-keyframes slideFadein-bottomTop {
    0%, 20% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }
}

.slideFadein-topBottom {
    opacity: 0;
}
.slideFadein-topBottom.on {
    -webkit-animation-name: slideFadein-topBottom;
    animation-name: slideFadein-topBottom;
    opacity: 1;
    animation-duration: 1s;
}

@keyframes slideFadein-topBottom {
    0%, 20% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }
}
@-webkit-keyframes slideFadein-topBottom {
    0%, 20% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 1;
    }
}

.border-ani {
    position: relative;
}
.border-ani .top-bottom,
.border-ani .lef-tight {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.border-ani .top-bottom:before,
.border-ani .top-bottom:after,
.border-ani .lef-tight:before,
.border-ani .lef-tight:after {
    content: '';
    position: absolute;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    background-color: #000;
    opacity: 0;
    z-index: 10;
}
.border-ani .top-bottom:before,
.border-ani .top-bottom:after {
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
    width: 0;
}
.border-ani .top-bottom:before {
    top: 0;
}
.border-ani .top-bottom:after {
    bottom: 0;
}
.border-ani:hover .top-bottom:before,
.border-ani:hover .top-bottom:after {
    width: 100%;
}
.border-ani .lef-tight:before,
.border-ani .lef-tight:after {
    top: 50%;
    transform: translateY(-50%);
    height: 0;
    width: 1px;
}
.border-ani .lef-tight:before {
    left: 0;
}
.border-ani .lef-tight:after {
    right: 0;
}
.border-ani:hover .lef-tight:before,
.border-ani:hover .lef-tight:after {
    height: 100%;
}
.border-ani:hover .top-bottom:before,
.border-ani:hover .top-bottom:after,
.border-ani:hover .lef-tight:before,
.border-ani:hover .lef-tight:after {
    opacity: 1;
}