Support intermittent shaking?

[blixt]

I needed a shake that only occurred for N% of the full animation (so that it would shake for say one second, then not move for three seconds before shaking again), so csshake wasn't a perfect fit for my use case. Maybe support for this could be added?

I ended up writing my own SCSS that wound up being similar to yours, so here it is in case you can use something from it:

@mixin create-shake($name, $x, $y, $angle, $keyframes: 10, $portion: 100%) {
  @keyframes #{$name} {
    $dx: 0px;
    $dy: 0px;
    $rotate: 0deg;

    $offset: 0%;
    $increment: $portion / $keyframes;
    @while $offset < $portion {
      @if $x != 0px { $dx: random($x) - $x / 2; }
      @if $y != 0px { $dy: random($y) - $y / 2; }
      @if $angle != 0deg { $rotate: random($angle) - $angle / 2; }

      #{$offset} {
        transform: translate($dx, $dy) rotate($rotate);
      }

      $offset: $offset + $increment;
    }

    #{if($portion < 100%, ($portion, 100%), 100%)} {
      transform: translate(0px, 0px) rotate(0deg);
    }
  }
}

Example use:

@include create-shake('intermittent', 8px, 8px, 12deg, 10, 30%);

Example output:

@keyframes intermittent {
  0% {
    transform: translate(3px, 1px) rotate(-4deg);
  }
  3% {
    transform: translate(3px, -3px) rotate(3deg);
  }
  6% {
    transform: translate(1px, 3px) rotate(-4deg);
  }
  9% {
    transform: translate(4px, 1px) rotate(0deg);
  }
  12% {
    transform: translate(0px, 2px) rotate(5deg);
  }
  15% {
    transform: translate(-2px, 1px) rotate(0deg);
  }
  18% {
    transform: translate(3px, -1px) rotate(-5deg);
  }
  21% {
    transform: translate(0px, 2px) rotate(6deg);
  }
  24% {
    transform: translate(2px, 0px) rotate(-5deg);
  }
  27% {
    transform: translate(1px, -3px) rotate(-5deg);
  }
  30%, 100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

[elrumordelaluz]

I'll review it asap @blixt thanks!

[elrumordelaluz]

hey @blixt first of all, thanks for the idea. I added this feature in the last release