Skip to content

Latest commit

 

History

History
199 lines (132 loc) · 7.03 KB

README.md

File metadata and controls

199 lines (132 loc) · 7.03 KB
Raw

Bounce

Bounce animations come from the opposite direction listed in the class (named after the direction it travels) and go slightly past the target and then oscillating a bit giving it the appearance of momentum and bounce.

Table of Contents (click to expand)

bounce-back-forth

This will take the element and animate it from the top down with a bounce at the end.

  • Group: General
  • Access: public
  • Since: 0.1.0

Parameters

Name Type Description Default
$className String a CSS class name to add to activate the animation ".animate"
$width Number a percentage of the width to take up 20%

Examples

@include bounce-back-forth();

bounce-in-down

This will take the element and animate it from the top down with a bounce at the end.

  • Group: General
  • Access: public
  • Since: 0.1.0

Parameters

Name Type Description Default
$className String a CSS class name to add to activate the animation ".animate"

Examples

@include bounce-in-down();

bounce-in-left

This will take the element and animate it from the left down with a bounce at the end.

  • Group: General
  • Access: public
  • Since: 0.1.0

Parameters

Name Type Description Default
$className String a CSS class name to add to activate the animation ".animate"

Examples

@include bounce-in-left();

bounce-in-right

This will take the element and animate it from the right down with a bounce at the end.

  • Group: General
  • Access: public
  • Since: 0.1.0

Parameters

Name Type Description Default
$className String a CSS class name to add to activate the animation ".animate"

Examples

@include bounce-in-right();

bounce-in-up

This will take the element and animate it from the bottom down with a bounce at the end.

  • Group: General
  • Access: public
  • Since: 0.1.0

Parameters

Name Type Description Default
$className String a CSS class name to add to activate the animation ".animate"

Examples

@include bounce-in-up();

bounce-out-down

This will take the element and animate it from the its current position with a bounce and then exit to through the bottom.

  • Group: General
  • Access: public
  • Since: 0.1.0

Parameters

Name Type Description Default
$className String a CSS class name to add to activate the animation ".animate"

Examples

@include bounce-out-down();

bounce-out-left

This will take the element and animate it from the its current position with a bounce and then exit to through the left.

  • Group: General
  • Access: public
  • Since: 0.1.0

Parameters

Name Type Description Default
$className String a CSS class name to add to activate the animation ".animate"

Examples

@include bounce-out-left();

bounce-out-right

This will take the element and animate it from the its current position with a bounce and then exit to through the right.

  • Group: General
  • Access: public
  • Since: 0.1.0

Parameters

Name Type Description Default
$className String a CSS class name to add to activate the animation ".animate"

Examples

@include bounce-out-right();

bounce-out-up

This will take the element and animate it from the its current position with a bounce and then exit to through the top.

  • Group: General
  • Access: public
  • Since: 0.1.0

Parameters

Name Type Description Default
$className String a CSS class name to add to activate the animation ".animate"

Examples

@include bounce-out-up();