Magic.css Animations

Additional effects from Magic.css

Magic.css Integration

This extension now includes animations from Magic.css.

These add unique effects not found in Animate.css!

Bling Effects

Scale and fade with blur:

puffIn - scales down with blur

vanishIn - scales with rotation

Bling Syntax

::: {.fragment .puffIn}
Puff in effect
:::

::: {.fragment .vanishIn}
Vanish in effect
:::

Perspective Animations

3D flip effects (entrances):

perspectiveDownReturn

perspectiveUpReturn

perspectiveLeftReturn

perspectiveRightReturn

Perspective Syntax

::: {.fragment .perspectiveDownReturn}
Flip from bottom
:::

::: {.fragment .perspectiveLeftReturn}
Flip from left
:::

Space Animations

Dramatic zoom effects:

spaceInDown

spaceInUp

spaceInLeft

spaceInRight

Space Syntax

::: {.fragment .spaceInDown}
Zoom from above
:::

::: {.fragment .spaceInRight}
Zoom from right
:::

Boing Animation

Elastic bounce effect:

boingInUp - elastic bounce from below

Boing Syntax

::: {.fragment .boingInUp}
Elastic bounce entrance
:::

Swash Animation

Swirl effect:

swashIn - swirl entrance

Swash Syntax

::: {.fragment .swashIn}
Swirl in effect
:::

Tin Animations

Subtle slide with scale:

tinDownIn

tinUpIn

tinLeftIn

tinRightIn

Tin Syntax

::: {.fragment .tinDownIn}
Subtle slide from top
:::

::: {.fragment .tinLeftIn}
Subtle slide from left
:::

Attention Seekers

Signature Magic.css effects:

magic - signature spiral

twisterInDown - tornado from top

twisterInUp - tornado from bottom

Attention Seeker Syntax

::: {.fragment .magic}
Signature magic effect
:::

::: {.fragment .twisterInDown}
Tornado entrance
:::

Inline Usage

Magic animations work inline too:

The puff and vanish effects.

A perspective flip.

Inline Syntax

The [puff]{.fragment .puffIn} effect.

A [perspective]{.fragment .perspectiveDownReturn} flip.

With Speed Utilities

Magic animations support speed classes:

Slow puff (3s)

Fast space (500ms)

Speed Syntax

::: {.fragment .puffIn .slower}
Slow puff
:::

::: {.fragment .spaceInDown .faster}
Fast space
:::

Letter-by-Letter

Magic animations work with letters:

Puff letters

Space letters

Letter Syntax

[Puff letters]{.fragment-letters .puffIn}

[Space letters]{.fragment-letters .spaceInDown .letter-fast}

Available Magic Animations

Category	Entrances	Exits
Bling	puffIn, vanishIn	puffOut, vanishOut
Perspective	perspective*Return	perspectiveDown/Up/Left/Right
Space	spaceInDown/Up/Left/Right	spaceOutDown/Up/Left/Right
Boing	boingInUp	boingOutDown
Swash	swashIn	swashOut
Tin	tinDownIn/UpIn/LeftIn/RightIn	tin*Out
Attention	magic, twisterInDown/Up	(same)

Learn More

See Magic.css for the original library.

All Magic animations are fully reversible!