/* KEYFRAMES */
@keyframes horizontal-sliding {
    0% {
        background-position: bottom left;
    }
    100% {
        background-position: bottom right;
    }
}

@-webkit-keyframes horizontal-sliding {
    0% {
        background-position: bottom left;
    }
    100% {
        background-position: bottom right;
    }
}

@keyframes fade {
    /* Correctif 14/10/19 pour bug Safari
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
    */
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes fade {
    /* Correctif 14/10/19 pour bug Safari
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
    */
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes fade-reverse {
    /* Correctif 14/10/19 pour bug Safari
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
    */
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@-webkit-keyframes fade-reverse {
    /* Correctif 14/10/19 pour bug Safari
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
    */
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes show-from-left {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@-webkit-keyframes show-from-left {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes show-from-right {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@-webkit-keyframes show-from-right {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes show-from-top {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

@-webkit-keyframes show-from-top {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes show-from-bottom {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@-webkit-keyframes show-from-bottom {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* REVERSE */
@keyframes show-from-left-reverse {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

@-webkit-keyframes show-from-left-reverse {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

@keyframes show-from-right-reverse {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@-webkit-keyframes show-from-right-reverse {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes show-from-top-reverse {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-100%);
    }
}

@-webkit-keyframes show-from-top-reverse {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-100%);
    }
}

@keyframes show-from-bottom-reverse {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100%);
    }
}

@-webkit-keyframes show-from-bottom-reverse {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100%);
    }
}

@keyframes pop {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes pop {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes pop-reverse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(0);
    }
}

@-webkit-keyframes pop-reverse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes grow {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes grow {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes grow-reverse {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@-webkit-keyframes grow-reverse {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes typing {
    from {
        width: 0
    }
    to {
        width: 100%
    }
}

@-webkit-keyframes typing {
    from {
        width: 0
    }
    to {
        width: 100%
    }
}