//
// kremalicious3
// --------------
// Animations
//

// Buttery Smooth(tm)
////////////////////////////////////

gpuacceleration()
    -webkit-transform: translate3d(0,0,0)
    -webkit-backface-visibility: hidden
    -webkit-perspective: 1000

.gpuacceleration
    gpuacceleration()


// Masonry
////////////////////////////////////

.masonry
    transition-property: height, width

    &,
    .masonry-brick
        transition-duration: 0.7s

    .masonry-brick
        transition-property: left, right, top


// Loading Thingy
////////////////////////////////////

.loading
    @extend .gpuacceleration
    animation: loadingThingy .2s infinite

@keyframes loadingThingy
    0%
        opacity: 1
    100%
        opacity: 0

//
// Bounce
//
// taken and adapted from
// http://daneden.github.io/animate.css/
////////////////////////////////////

// Down
@keyframes bounceInDown
    0%, 60%, 75%, 90%, 100%
        // http://cubic-bezier.com/#.06,.85,.54,1.39
        transition-timing-function: cubic-bezier(.06,.85,.54,1)

    0%
        transform: translate3d(0, -100px, 0)

    60%
        transform: translate3d(0, 20px, 0)

    75%
        transform: translate3d(0, -10px, 0)

    90%
        transform: translate3d(0, 5px, 0)

    100%
        transform: none

.bounceInDown
    animation: bounceInDown .4s both

// Up
@keyframes bounceOutUp
    20%
        transform: translate3d(0, -10px, 0)

    40%, 45%
        transform: translate3d(0, 20px, 0)

    100%
        transform: translate3d(0, -100px, 0)

.bounceOutUp
    animation: bounceOutUp .5s both