/*

Arambankudyil Consultancy Private Limited, 2017
Last Updated: 22/07/2017

Reference:
https://codepen.io/Technospire/pen/XNgYqX

*/


/*Bounce*/
@keyframes kreep {
    0% {
        -webkit-transform: scale(1.1, .9);
        transform: scale(1.1, .9);
    }
    50% {
        -webkit-transform: scale(.9, 1.1) translateY(-.5rem)
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

h1.kreep {
    display: inline-block;
    /*name-duration-function(ease,eas-in,linear)-delay-count-direction */
    animation: kreep 0.7s ease 2s infinite alternate;
}

h1.kreep:hover {
    animation: none;
}

/*END BOUNCER*/

/*SHAKER*/
@keyframes wiggle {
    2% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }
    4% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
    6% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }
    8% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
    10% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }
    12% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }
    14% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }
    16% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }
    18% {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0);
    }
    20% {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0);
    }
}

h1.wiggle {
    display: inline-block;
    animation: wiggle 2.7s infinite;
}

h1.wiggle:hover {
    animation: none;
}

span.wiggle {
    padding: 5px 32px;
    display: inline-block;
    animation: wiggle 2.7s infinite;
}

span.wiggle:hover {
    padding: 5px 32px;
    animation: none;
}

/*END SHAKER*/