/*
 * --------------------
 * CSS animation styles
 * --------------------
 */

@keyframes anim_wiggle {
    0%   { transform: rotate( 0deg ); }
    20%  { transform: rotate( 40deg ); }
    40%  { transform: rotate( -20deg ); }
    60%  { transform: rotate( 10deg ); }
    80%  { transform: rotate( -5deg ); }
    100% { transform: rotate( 0deg ); }
}

.hover_anim_wiggle {
    animation-name: anim_wiggle;
    animation-duration: 0.5s;
}

@keyframes anim_bounce_right {
    0%   { transform: translateX( 0% ); }
    50%  { transform: translateX( 50% ); }
    100% { transform: translateX( 0% ); }
}

.hover_anim_bounce_right {
    animation-name: anim_bounce_right;
    animation-duration: 0.2s;
    animation-iteration-count: infinite;
}

@keyframes anim_fadin_bottom {
    0%   { transform: translateY( 100% ); opacity: 0; }
    100% { transform: translateY( 0% ); opacity: 1; }
}

.anim_fadin_bottom {
    animation-name: anim_fadin_bottom;
    animation-duration: 0.5s;
}

@keyframes anim_fadeout_bottom {
    0%   { transform: translateY( 0% ); opacity: 1; }
    100% { transform: translateY( 100% ); opacity: 0; }
}

.anim_fadeout_bottom {
    animation-name: anim_fadeout_bottom;
    animation-duration: 0.5s;
}