Skip to content

Latest commit

 

History

History
240 lines (159 loc) · 7.74 KB

README.md

File metadata and controls

240 lines (159 loc) · 7.74 KB

Fade

Fade animations are a bit more subtle. They still come from the opposite direction listed in the class (named after the direction it travels) but they transition the opacity of the element instead.

Table of Contents (click to expand)

fade-flash

This will take the element and fade it in from its current position.

  • 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 fade-flash();

fade-in-down

This will take the element and fade it in from 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 fade-in-down();

fade-in-left

This will take the element and fade it in from 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 fade-in-left();

fade-in-right

This will take the element and fade it in from 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 fade-in-right();

fade-in-up

This will take the element and fade it in from the bottom.

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

Parameters

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

Examples

@include fade-in-up();

fade-in

This will take the element and fade it in from its current position.

  • 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 fade-in();

fade-out-down

This will take the element and fade it out from 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 fade-out-down();

fade-out-left

This will take the element and fade it out from 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 fade-out-left();

fade-out-right

This will take the element and fade it out from 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 fade-out-right();

fade-out-up

This will take the element and fade it out from 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 fade-out-up();

fade-out

This will take the element and fade it out from its current position.

  • 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 fade-out();