_bounce-vertical()

  • /src/css/core/mixin/_animation.scss

Bounce vertical

scss

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

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

_shake-vertical()

  • /src/css/core/mixin/_animation.scss

Shake vertical

scss

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

_vibrate-vertical()

  • /src/css/core/mixin/_animation.scss

Vibrate vertical

scss

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

_bounce-horizontal()

  • /src/css/core/mixin/_animation.scss

Bounce horizontal

scss

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

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

_shake-horizontal()

  • /src/css/core/mixin/_animation.scss

Shake horizontal

scss

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

_vibrate-horizontal()

  • /src/css/core/mixin/_animation.scss

Vibrate horizontal

scss

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

_bounce-scale()

  • /src/css/core/mixin/_animation.scss

Bounce scale

scss

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

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

_shake-scale()

  • /src/css/core/mixin/_animation.scss

Shake scale

scss

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

_vibrate-scale()

  • /src/css/core/mixin/_animation.scss

Vibrate scale

scss

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

_extend-underline()

  • /src/css/core/mixin/_animation.scss

Extend the underline from the center.

  • This mixin use the pseudo-elements.

scss

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