Skip to main content

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.

Important

A reader whose system asks for reduced motion sees no animation on this page, and printed output carries none either. The bundled stylesheet answers prefers-reduced-motion: reduce and print by cutting every animation to 1ms and a single run, with !important, which beats the inline duration the shortcode writes. The same block sets opacity: 0 on an animated element whose class attribute contains Out, so every exit effect is hidden outright rather than played.

It does not touch animation-delay. A delayed entrance therefore still waits, and holds its first frame while it waits. This site sets delay: 1s for the whole project, so a call on this page waits a second before its text appears, unless it carries a delay no class matches, which animates at once. The longest wait on the page is three seconds, which the delay=3s call and the last call of the staggered run both take. Use delay sparingly for that reason.

The Reference records the same behaviour.

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

delay maps to an Animate.css class as well, and only whole seconds from 1s to 5s have one.

A delay that reaches the output, and one that does not.

Source	Renders as
{{< animate fadeIn "After three seconds" delay=3s >}}	After three seconds
{{< animate fadeIn "Straight away" delay=500ms >}}	Straight away

The second call is valid, and it writes the class animate__delay-500ms, which no rule matches. That text therefore animates at once. The class multiplies --animate-delay rather than setting an absolute time, and the extension writes that variable once per document. On this page it holds 1s, so animate__delay-3s is three seconds here. See What the timing values actually do for the full rule.

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.

Setting the options once

Every attribute is also an option under extensions.animate, in the front matter of a document or in a project’s _quarto.yml. This site sets two of them:

extensions:
  animate:
    duration: 1s
    delay: 1s

An attribute on a call beats that block, and the block beats the extension’s own defaults of 3s and 2s.

The project value, and a call that overrides it.

Source	Renders as
{{< animate rotateIn "Project setting" >}}	Project setting
{{< animate rotateIn "Call setting" duration=5s >}}	Call setting

The first turns for one second, from the block above. The second turns for five. See Options for the full list.

Caution

The block must sit under extensions. A top-level animate: block is ignored, which leaves the defaults in place. It warns as well when it holds duration, delay or repeat, and says nothing when it holds only stagger or direction. See Validation.

Quoting the text

The text is the second positional argument, so it needs quotes as soon as it contains a space.

Without quotes, each word becomes a separate argument. The shortcode reads the first two, warns about the rest, and animates one word only:

{{< animate bounce Two words >}}

That call writes Two and drops words from the page. The extension warns that it received three arguments where two are defined, and that the extras were ignored. This page does not render the call, because the site is kept free of warnings.

A double quote cannot be typed inside double-quoted text. A backslash does not escape it: the text is cut at the backslash, and the call warns.

Quote the argument with apostrophes instead, and the double quotes pass through:

{{< animate bounce 'She said "go"' >}}

She said "go"

The HTML entity works as well, and is the way to carry both kinds of quote at once:

{{< animate bounce "She said &quot;go&quot;" >}}

She said "go"

An apostrophe needs no entity:

{{< animate bounce "It's fine" >}}

It's fine

See Shortcode for both arguments.

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

A hand-written element carries no inline duration, so it takes --animate-duration instead. The extension writes that variable once per document, from the first animate shortcode in it. On this page that call is the duration=500ms one under Timing, so the span and the div above both run in half a second rather than the project’s one second.

Effects

Every effect the extension accepts, played by the extension.

Animate.css keeps the last frame of an animation, so each exit effect below leaves its text invisible, or moved out of place, once it has played. hinge and rollOut, under Specials, end the same way.

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

Reveal.js

In html an animation plays once, when the page loads. Under revealjs the extension also loads animate.js, which listens for slidechanged and replays the effect each time the slide comes into view.

This site is an html site, so the deck below is source only:

---
format: revealjs
---

## A slide

{{< animate bounce "Plays on every visit to this slide" >}}

See Output for what each format loads.

Source

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