/*Makes the element wiggle left/right 
relative to start position
must have position: relative;*/
@keyframes wiggle {
    0%   {left:-10px;}
    50%  {left:10px;}
    100%   {left:-10px;}
}



/*Makes the children elements wiggle*/
.wiggleContainer > * {
    /*Wiggle Animation*/
    position: relative;
    padding: 0px;
    left: -10px;
    animation-name: wiggle;
    animation-duration: 3.25s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

@keyframes hop {
    0%   {top:-20px;}
    50%  {top:20px;}
    100%   {top:-20px;}
}

.hopContainer > * {
    position: relative;
    top: 20px;
    animation-name: hop;
    animation-duration: 3.25s;
    animation-fill-mode: linear;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}

@keyframes appear {
    0%   {opacity: 0%;}
    100%   {opacity: 100%;}
}

.appear {
    opacity: 0%;
    animation-name: appear;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}