CSS Animations

@keyframes wiggle {
    0% { transform: rotate(0deg); }
   80% { transform: rotate(0deg); }
   85% { transform: rotate(5deg); }
   95% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  } 
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
div.anim{
    display: inline-block;
    border: 1px solid #b94a48;
    border-radius: 4px;
    background: #b94a48;
    color: #fff;
    padding: 6px;
    box-shadow: 4px 4px 4px #ccc;
}
  
div.wiggle {  
    animation: wiggle 0.5s 1;      
}

div.wiggle:hover {
    animation: none;
}

div.shake{
    top:150px;
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}