CSS Keyframe phone vibrate

I'm trying to make an effect like a phone vibration. This is what i currently have: https://codepen.io/anon/pen/jwWwzx

I'm just trying to figure out how to add a break so like vibrate for a second then pause for a second then repeat.

<div class="phone"><img src="https://i.imgpile.com/nucPMx.png"></div>


.phone {
  -webkit-animation: vibrate 0.32s cubic-bezier(.36, .07, .19, .97) infinite;
  animation: vibrate 0.32s cubic-bezier(.36, .07, .19, .97) infinite;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 300px;
  perspective: 300px;
}

@keyframes vibrate {
  0.50%, 90% {
   -webkit-transform: translate3d(-0.5px, 0, 0);
   transform: translate3d(-0.5px, 0, 0);
 }

0.50%, 80% {
  -webkit-transform: translate3d(0.5px, 0, 0);
  transform: translate3d(0.5px, 0, 0);
}

30%, 50%, 70% {
  -webkit-transform: translate3d(-0.5px, 0, 0);
  transform: translate3d(-0.5px, 0, 0);
}

0.50%, 60% {
  -webkit-transform: translate3d(0.5px, 0, 0);
  transform: translate3d(0.5px, 0, 0);
}
}

I updated your code so that it pauses around 20% of the animation. This way, you get to keep both, the pause at the end, and the quick vibration effect (DEMO):

.phone {
  -webkit-animation: vibrate 2s cubic-bezier(.36, .07, .19, .97) infinite;
  animation: vibrate 2s cubic-bezier(.36, .07, .19, .97) infinite;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 300px;
  perspective: 300px;
}


@keyframes vibrate {
  0%, 2%, 4%, 6%, 8%, 10%, 12%, 14%, 16%, 18% {
    -webkit-transform: translate3d(-1px, 0, 0);
            transform: translate3d(-1px, 0, 0);
  }
  1%, 3%, 5%, 7%, 9%, 11%, 13%, 15%, 17%, 19% {
    -webkit-transform: translate3d(1px, 0, 0);
            transform: translate3d(1px, 0, 0);
  }
  20%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}