title: How to use animate.css shake with less shakes
body: <p>I'm using animate.css for a CSS3 shake effect, the CSS looks like the snippet below. Right now it shakes back and forth multiple times and I'd like to cut the shakes in half. Is there a way to do this with animate css3 or do I need to modify the css3 below? If so, what's the best way?</p>
  
  <pre><code>@-webkit-keyframes shake {
    0%, 100% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
  
    10%, 30%, 50%, 70%, 90% {
      -webkit-transform: translate3d(-10px, 0, 0);
              transform: translate3d(-10px, 0, 0);
    }
  
    20%, 40%, 60%, 80% {
      -webkit-transform: translate3d(10px, 0, 0);
              transform: translate3d(10px, 0, 0);
    }
  }
  
  @keyframes shake {
    0%, 100% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
  
    10%, 30%, 50%, 70%, 90% {
      -webkit-transform: translate3d(-10px, 0, 0);
              transform: translate3d(-10px, 0, 0);
    }
  
    20%, 40%, 60%, 80% {
      -webkit-transform: translate3d(10px, 0, 0);
              transform: translate3d(10px, 0, 0);
    }
  }
  
  .shake {
    -webkit-animation-name: shake;
    animation-name: shake;
  }
  </code></pre>