Examples

Every effect, and every option, rendered.

The complete Animate.css effect gallery played by the extension, alongside worked examples of the timing options.

Everything below is rendered by the extension as this page is built. The site sets duration: 1s and delay: 1s, rather than the extension’s own 3s and 2s, so the gallery plays without a long wait. Every other option is left at its default.

Animations play once, as the page loads. Reload to watch them again.

Timing

duration is written as an inline style, so any CSS time works exactly.

The same effect at two durations.
Source Renders as
{{< animate pulse "Quick" duration=500ms >}}

Quick
{{< animate pulse "Slow" duration=4s >}}

Slow

repeat maps to an Animate.css class, and only 1, 2, 3, and infinite have one.

Repeating an animation.
Source Renders as
{{< animate tada "Three times" repeat=3 >}}

Three times
{{< animate heartBeat "Forever" repeat=infinite >}}

Forever

direction reverses or alternates the animation, and is most visible when it repeats.

Playing an animation backwards.
Source Renders as
{{< animate bounce "Reverse" direction=reverse repeat=2 >}}

Reverse
{{< animate bounce "Alternate" direction=alternate repeat=2 >}}

Alternate

Sequencing

stagger adds an increment to the delay of each successive shortcode, so a run of them arrives in order rather than together.

{{< animate fadeIn "One" stagger=1s >}}
{{< animate fadeIn "Two" stagger=1s >}}
{{< animate fadeIn "Three" stagger=1s >}}

One Two Three

Note

The increment is applied as a delay, so it is subject to the same limitation: only whole seconds from one to five reach the output. An increment of 300ms validates and then does nothing.

Special characters

The text is HTML-escaped, so punctuation that would otherwise break the markup survives:

{{< animate bounce "Cats & dogs <3" >}}

Cats & dogs <3

Animating something other than plain text

The shortcode’s second argument is plain text, so markdown inside it is not parsed. This does not produce a link:

{{< animate bounce "[Animate.css](https://animate.style)" >}}

Write the Animate.css classes on a span instead, which leaves the markdown to Quarto:

[[Animate.css](https://animate.style)]{.animate__animated .animate__bounce style="display:inline-block;"}

Animate.css

Or on a div, for a whole block:

::: {.animate__animated .animate__bounce}
[Animate.css](https://animate.style)
:::

Animate.css

Effects

Every effect the extension accepts, played by the extension.

Attention seekers

  • bounce bounce
  • flash flash
  • pulse pulse
  • rubberBand rubberBand
  • shakeX shakeX
  • shakeY shakeY
  • headShake headShake
  • swing swing
  • tada tada
  • wobble wobble
  • jello jello
  • heartBeat heartBeat

Back entrances

  • backInDown backInDown
  • backInLeft backInLeft
  • backInRight backInRight
  • backInUp backInUp

Back exits

  • backOutDown backOutDown
  • backOutLeft backOutLeft
  • backOutRight backOutRight
  • backOutUp backOutUp

Bouncing entrances

  • bounceIn bounceIn
  • bounceInDown bounceInDown
  • bounceInLeft bounceInLeft
  • bounceInRight bounceInRight
  • bounceInUp bounceInUp

Bouncing exits

  • bounceOut bounceOut
  • bounceOutDown bounceOutDown
  • bounceOutLeft bounceOutLeft
  • bounceOutRight bounceOutRight
  • bounceOutUp bounceOutUp

Fading entrances

  • fadeIn fadeIn
  • fadeInDown fadeInDown
  • fadeInDownBig fadeInDownBig
  • fadeInLeft fadeInLeft
  • fadeInLeftBig fadeInLeftBig
  • fadeInRight fadeInRight
  • fadeInRightBig fadeInRightBig
  • fadeInUp fadeInUp
  • fadeInUpBig fadeInUpBig
  • fadeInTopLeft fadeInTopLeft
  • fadeInTopRight fadeInTopRight
  • fadeInBottomLeft fadeInBottomLeft
  • fadeInBottomRight fadeInBottomRight

Fading exits

  • fadeOut fadeOut
  • fadeOutDown fadeOutDown
  • fadeOutDownBig fadeOutDownBig
  • fadeOutLeft fadeOutLeft
  • fadeOutLeftBig fadeOutLeftBig
  • fadeOutRight fadeOutRight
  • fadeOutRightBig fadeOutRightBig
  • fadeOutUp fadeOutUp
  • fadeOutUpBig fadeOutUpBig
  • fadeOutTopLeft fadeOutTopLeft
  • fadeOutTopRight fadeOutTopRight
  • fadeOutBottomRight fadeOutBottomRight
  • fadeOutBottomLeft fadeOutBottomLeft

Flippers

  • flip flip
  • flipInX flipInX
  • flipInY flipInY
  • flipOutX flipOutX
  • flipOutY flipOutY

Lightspeed

  • lightSpeedInRight lightSpeedInRight
  • lightSpeedInLeft lightSpeedInLeft
  • lightSpeedOutRight lightSpeedOutRight
  • lightSpeedOutLeft lightSpeedOutLeft

Rotating entrances

  • rotateIn rotateIn
  • rotateInDownLeft rotateInDownLeft
  • rotateInDownRight rotateInDownRight
  • rotateInUpLeft rotateInUpLeft
  • rotateInUpRight rotateInUpRight

Rotating exits

  • rotateOut rotateOut
  • rotateOutDownLeft rotateOutDownLeft
  • rotateOutDownRight rotateOutDownRight
  • rotateOutUpLeft rotateOutUpLeft
  • rotateOutUpRight rotateOutUpRight

Specials

  • hinge hinge
  • jackInTheBox jackInTheBox
  • rollIn rollIn
  • rollOut rollOut

Zooming entrances

  • zoomIn zoomIn
  • zoomInDown zoomInDown
  • zoomInLeft zoomInLeft
  • zoomInRight zoomInRight
  • zoomInUp zoomInUp

Zooming exits

  • zoomOut zoomOut
  • zoomOutDown zoomOutDown
  • zoomOutLeft zoomOutLeft
  • zoomOutRight zoomOutRight
  • zoomOutUp zoomOutUp

Sliding entrances

  • slideInDown slideInDown
  • slideInLeft slideInLeft
  • slideInRight slideInRight
  • slideInUp slideInUp

Sliding exits

  • slideOutDown slideOutDown
  • slideOutLeft slideOutLeft
  • slideOutRight slideOutRight
  • slideOutUp slideOutUp

Source

The repository ships a short, standalone starting point you can copy: example.qmd.

Back to top