Запустить два класса анимации CSS с задержкой между двумя, но бесконечно

Я хочу запустить две CSS-анимации на кнопке, но с задержкой, ч / б две, но работать затем бесконечно и приостановить ее на несколько секунд, а затем повторить ее снова.

Встряхните в течение 3 секунд, и сразу после окончания встряхивания анимация пульса запустится на 2 секунды, а затем с паузой на 5 секунд, теперь повторите снова.

 .single_add_to_cart_button {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both,
pulse 2s infinite;
transform: translate3d(0,0,0);
backface-visibility: hidden;
perspective: 1000px;
animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;}

@-webkit-keyframes pulse {0%{-webkit-transform:scale(.98);transform:scale(.98)}70%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(.98);transform:scale(.98)}}@keyframes pulse{0%{-webkit-transform:scale(.98);transform:scale(.98)}70%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(.98);transform:scale(.98)}}

@keyframes shake{from,16%,to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}1.6%,4.8%{-webkit-transform:translate3d(-1px,0,0);transform:translate3d(-1px,0,0)}8%,11.2%,14.4%{-webkit-transform:translate3d(-4px,0,0);transform:translate3d(-4px,0,0)}9.6%,12.8%{-webkit-transform:translate3d(4px,0,0);transform:translate3d(4px,0,0)}3.2%,6.4%{-webkit-transform:translate3d(2px,0,0);transform:translate3d(2px,0,0)}}

<button type = "submit" class = "single_add_to_cart_button button alt disabled wc-variation-selection-needed">YES,I WANT IT NOW</button>