@include keyframes(jelly) {
    0% {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(.75, 1.25, 1);
    }

    40% {
        transform: scale3d(1.25, .75, 1);
    }

    50% {
        transform: scale3d(.85, 1.15, 1);
    }

    65% {
        transform: scale3d(1.05, .95, 1);
    }

    75% {
        transform: scale3d(.95, 1.05, 1);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}



@include keyframes(wobble) {
    0% {
        -webkit-transform: none;
        transform: none;
    }
    15% {
        @include transform(translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg));
    }
    30% {
        @include transform(translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg));
    }
    45% {
        @include transform(translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg));
    }
    60% {
        @include transform(translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg));
    }
    75% {
        @include transform(translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg));
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble;
}



@include keyframes(jello) {
    0%,
    11.1%,
    to {
        transform: none
    }
    22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }
    33.3% {
        transform: skewX(6.25deg) skewY(6.25deg)
    }
    44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }
    55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }
    66.6% {
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }
    77.7% {
        transform: skewX(.390625deg) skewY(.390625deg)
    }
    88.8% {
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}
.jello {
    animation-name: jello;
    transform-origin: center
}