lobibox/less/animations.less

jQuery Responsive notification plugin

/* 
    Created on : Aug 11, 2014, 5:14:12 PM
    Author     : @arboshiki
*/

.animated-super-fast {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated-fast {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated-slow {
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}

//------------------------------------------------------------------------------
@-webkit-keyframes jumpUp {
    0% {
        -webkit-transform: translate3d(0, calc(200% + 30px), 0) scale3d(0, 1, 1);
        -webkit-animation-timing-function: ease-in;
    }
    40% {
        -webkit-transform: translate3d(0, 0, 0) scale3d(0.02, 1.1, 1);
        -webkit-animation-timing-function: ease-out;
    }
    70% {
        -webkit-transform: translate3d(0, -40px, 0) scale3d(0.8, 1.1, 1);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }
}

@keyframes jumpUp {
    0% {
        transform: translate3d(0, calc(200% + 30px), 0) scale3d(0, 1, 1);
        animation-timing-function: ease-in;
    }
    40% {
        transform: translate3d(0, 0, 0) scale3d(0.02, 1.1, 1);
        animation-timing-function: ease-out;
    }
    70% {
        transform: translate3d(0, -40px, 0) scale3d(0.8, 1.1, 1);
    }
    100% {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }
}

//------------------------------------------------------------------------------

@-webkit-keyframes expandOpen {
    0% {
        -webkit-transform: scale(1.8);
    }
    50% {
        -webkit-transform: scale(0.95);
    }
    80% {
        -webkit-transform: scale(1.05);
    }
    90% {
        -webkit-transform: scale(0.98);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

@keyframes expandOpen {
    0% {
        transform: scale(1.8);
    }
    50% {
        transform: scale(0.95);
    }
    80% {
        transform: scale(1.05);
    }
    90% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
    }
}

//------------------------------------------------------------------------------
@keyframes fadeInScale {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

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

//------------------------------------------------------------------------------

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3);
    }

    50% {
        opacity: 1;
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        -ms-transform: scale(.3);
        transform: scale(.3);
    }

    50% {
        opacity: 1;
    }
}

//------------------------------------------------------------------------------
@-webkit-keyframes zoomOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3);
    }

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

    50% {
        opacity: 0;
        -webkit-transform: scale(.3);
        -ms-transform: scale(.3);
        transform: scale(.3);
    }

    100% {
        opacity: 0;
    }
}
//------------------------------------------------------------------------------
@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
}

.jumpUp {
    -webkit-animation-name: jumpUp;
    animation-name: jumpUp;
}

.expandOpen {
    animation-name: expandOpen;
    -webkit-animation-name: expandOpen;
}

.fadeInScale {
    animation-name: fadeInScale;
    -webkit-animation-name: fadeInScale;
}