Animation repeat after the pause

Hey,

This is possible, but not using the animation-delay property unfortunately, which just adds a delays before the animation first runs. The solution involves editing the keyframes for the animation. This article explains the method nicely: https://css-tricks.com/css-keyframe-animation-delay-iterations/

For you using Microthemer, I recommend the following:

1. Add the shake animation to the button
2. View the CSS code Microthemer generates.
3. Copy the keyframes code for the shake animation that will be shown at the top of the code Editor
4. Paste the keyframe code into Microthemer’s full code editor: View > Code editor
5. Edit the keyframes code to have the same properties for a large percentage of the time (see example below)
6. Give the keyframes a new name e.g. myShake
7. Go back to Microthemer’s GUI view – the keyboard shortcut Ctrl + Alt + C is useful when switching between the two views frequently.
8. Enter your custom animation name into the animation-name field: myShake
9. Set the animation-duration to 6s, and animation-iteration-count to infinite or a large number.
10. You may have to play around with the percentages of the keyframes to get the delay just right.

So the following keyframe code for shake:

@keyframes shake {
  from, to {
    -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);
  }
}

Becomes:

@keyframes myShake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 20%, 30%, 40%, 50% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  15%, 25%, 35%, 45% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  51% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
} 

Note: for a longer delay, you could change the top row of percentages to:

4%, 8%, 12%,16%, 20%

And the second row to:

6%, 10%, 14%,18%,

And the last row to:

21%

I hope that helps!

Cheers,
Sebastian