﻿

.productfruits--body-margin-animated {
    transition: margin-top .7s;
}
.productfruits--body-padding-animated {
    transition: padding-top .7s, padding-bottom .7s;
}

/**
    ANIMATIONS
*/
.productfruits--animation-shake {
    animation: productfruits--animationkeys-shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    /*transform: translate3d(0, 0, 0);*/
}

@keyframes productfruits--animationkeys-shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}



.productfruits--animation-rubberband {
    animation: productfruits--animationkeys-rubberband 0.9s;
}

@keyframes productfruits--animationkeys-rubberband {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}




.productfruits--animation-flash {
    animation: productfruits--animationkeys-flash 0.9s;
}

@keyframes productfruits--animationkeys-flash {
    from, 50%, to {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

.productfruits--animation-blurbg {
    animation: productfruits--animationkeys-blurbg 1.5s;
    animation-fill-mode: forwards;
}

@keyframes productfruits--animationkeys-blurbg {
    0% {
        -webkit-filter: blur(0px);
    }

    50% {
        -webkit-filter: blur(20px);
    }

    100% {
        -webkit-filter: blur(40px);
    }
}

.productfruits--animation-slidein-left {
    animation: productfruits--animationkeys-slidein-left .4s;
    animation-fill-mode: forwards;
}

@keyframes productfruits--animationkeys-slidein-left {
    1% {
        transform: translateX(-200px);
    }

    100% {
        transform: translateX(0)
    }
}
























