General
mixins
bounce-back-forth
Since 0.1.0@mixin bounce-back-forth($className: ".animate") { ... }Description
This will take the element and animate it from the top down with a bounce at the end.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include bounce-back-forth();fade-flash
Since 0.1.0@mixin fade-flash($className: ".animate") { ... }Description
This will take the element and fade it in from its current position.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include fade-flash();bounce-in-down
Since 0.1.0@mixin bounce-in-down($className: ".animate") { ... }Description
This will take the element and animate it from the top down with a bounce at the end.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include bounce-in-down();fade-in-down
Since 0.1.0@mixin fade-in-down($className: ".animate") { ... }Description
This will take the element and fade it in from the top.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include fade-in-down();slide-in-down
Since 0.1.0@mixin slide-in-down($className: ".animate") { ... }Description
This will take the element and slide it from the top.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include slide-in-down();bounce-in-left
Since 0.1.0@mixin bounce-in-left($className: ".animate") { ... }Description
This will take the element and animate it from the left down with a bounce at the end.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include bounce-in-left();fade-in-left
Since 0.1.0@mixin fade-in-left($className: ".animate") { ... }Description
This will take the element and fade it in from the left.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include fade-in-left();slide-in-left
Since 0.1.0@mixin slide-in-left($className: ".animate") { ... }Description
This will take the element and slide it from the left.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include slide-in-left();bounce-in-right
Since 0.1.0@mixin bounce-in-right($className: ".animate") { ... }Description
This will take the element and animate it from the right down with a bounce at the end.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include bounce-in-right();fade-in-right
Since 0.1.0@mixin fade-in-right($className: ".animate") { ... }Description
This will take the element and fade it in from the right.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include fade-in-right();slide-in-right
Since 0.1.0@mixin slide-in-right($className: ".animate") { ... }Description
This will take the element and slide it from the right.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include slide-in-right();bounce-in-up
Since 0.1.0@mixin bounce-in-up($className: ".animate") { ... }Description
This will take the element and animate it from the bottom down with a bounce at the end.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include bounce-in-up();fade-in-up
Since 0.1.0@mixin fade-in-up($classNameName: ".animate") { ... }Description
This will take the element and fade it in from the bottom.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$classNameName | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include fade-in-up();slide-in-up
Since 0.1.0@mixin slide-in-up($className: ".animate") { ... }Description
This will take the element and slide it from the bottom.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include slide-in-up();fade-in
Since 0.1.0@mixin fade-in($className: ".animate") { ... }Description
This will take the element and fade it in from its current position.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include fade-in();bounce-out-down
Since 0.1.0@mixin bounce-out-down($className: ".animate") { ... }Description
This will take the element and animate it from the its current position with a bounce and then exit to through the bottom.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include bounce-out-down();fade-out-down
Since 0.1.0@mixin fade-out-down($className: ".animate") { ... }Description
This will take the element and fade it out from the bottom.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include fade-out-down();slide-out-down
Since 0.1.0@mixin slide-out-down($className: ".animate") { ... }Description
This will take the element and slide it out from the down.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include slide-out-down();bounce-out-left
Since 0.1.0@mixin bounce-out-left($className: ".animate") { ... }Description
This will take the element and animate it from the its current position with a bounce and then exit to through the left.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include bounce-out-left();fade-out-left
Since 0.1.0@mixin fade-out-left($className: ".animate") { ... }Description
This will take the element and fade it out from the left.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include fade-out-left();slide-out-left
Since 0.1.0@mixin slide-out-left($className: ".animate") { ... }Description
This will take the element and slide it out from the left.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include slide-out-left();bounce-out-right
Since 0.1.0@mixin bounce-out-right($className: ".animate") { ... }Description
This will take the element and animate it from the its current position with a bounce and then exit to through the right.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include bounce-out-right();fade-out-right
Since 0.1.0@mixin fade-out-right($className: ".animate") { ... }Description
This will take the element and fade it out from the right.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include fade-out-right();slide-out-right
Since 0.1.0@mixin slide-out-right($className: ".animate") { ... }Description
This will take the element and slide it out from the right.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include slide-out-right();bounce-out-up
Since 0.1.0@mixin bounce-out-up($className: ".animate") { ... }Description
This will take the element and animate it from the its current position with a bounce and then exit to through the top.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include bounce-out-up();fade-out-up
Since 0.1.0@mixin fade-out-up($className: ".animate") { ... }Description
This will take the element and fade it out from the top.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include fade-out-up();slide-out-up
Since 0.1.0@mixin slide-out-up($className: ".animate") { ... }Description
This will take the element and slide it out from the top.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include slide-out-up();fade-out
Since 0.1.0@mixin fade-out($className: ".animate") { ... }Description
This will take the element and fade it out from its current position.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$className | a CSS class name to add to activate the animation | String | ".animate" |
Example
@include fade-out();