Bounce vertical

scss

//
// @param   length             $px        bounce size
// @param   second|milisecond  $delay: 0  animate time
//

.c-foo {
  @include _hover() {
    @include _bounce-vertical(4px, .5s);
  }
}

Shake vertical

scss

.c-foo {
  @include _hover() {
    @include _shake-vertical();
  }
}

Vibrate vertical

scss

.c-foo {
  @include _hover() {
    @include _vibrate-vertical();
  }
}

Bounce horizontal

scss

//
// @param   length             $px        bounce size
// @param   second|milisecond  $delay: 0  animate time
//

.c-foo {
  @include _hover() {
    @include _bounce-horizontal(4px, .5s);
  }
}

Shake horizontal

scss

.c-foo {
  @include _hover() {
    @include _shake-horizontal();
  }
}

Vibrate horizontal

scss

.c-foo {
  @include _hover() {
    @include _vibrate-horizontal();
  }
}

Bounce scale

scss

//
// @param   float              $px        bounce size
// @param   second|milisecond  $delay: 0  animate time
//

.c-foo {
  @include _hover() {
    @include _bounce-scale(1.2, .5s);
  }
}

Shake scale

scss

.c-foo {
  @include _hover() {
    @include _shake-scale();
  }
}

Vibrate scale

scss

.c-foo {
  @include _hover() {
    @include _vibrate-scale();
  }
}

Extend the underline from the center.

• This mixin use the pseudo-elements.

scss

.c-foo a {
  @include _hover() {
    &::after {
      @include _extend-underline();
    }
  }
}