Animation repeat after the pause

Author Posts

balticsamurai July 18, 2018 at 6:42 am

I’ve figured out how to add an animation, however, I’d like to repeat animation after a while. E.g. button shakes every 5 seconds. I’m sure it’s doable but currently, I’m either shaking it ‘non-stop’ or shaking it once and done. Thanks.

Sebastian July 18, 2018 at 7:20 pm

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

balticsamurai July 19, 2018 at 12:15 am

Sebastian, you are awesome! Thanks.

You must login or register to reply to this topic.