Bounce vertical

scss

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

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.hover() {
    @include core.bounce-vertical(4px, .5s);
  }
}

Shake vertical

scss

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.hover() {
    @include core.shake-vertical();
  }
}

Vibrate vertical

scss

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.hover() {
    @include core.vibrate-vertical();
  }
}

Bounce horizontal

scss

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

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.hover() {
    @include core.bounce-horizontal(4px, .5s);
  }
}

Shake horizontal

scss

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.hover() {
    @include core.shake-horizontal();
  }
}

Vibrate horizontal

scss

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.hover() {
    @include core.vibrate-horizontal();
  }
}

Bounce scale

scss

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

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.hover() {
    @include core.bounce-scale(1.2, .5s);
  }
}

Shake scale

scss

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.hover() {
    @include core.shake-scale();
  }
}

Vibrate scale

scss

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.hover() {
    @include core.vibrate-scale();
  }
}

Extend the underline from the center.

• This mixin use the pseudo-elements.

scss

@use "node_modules/sass-basis/src/css/core";

.c-foo a {
  @include core.hover() {
    &::after {
      @include core.extend-underline();
    }
  }
}