Запустить два CSS-класса анимации с задержкой между двумя, но бесконечной - PullRequest
0 голосов
/ 03 ноября 2018

Я хочу запустить две 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>
...