Animate.css Extension for Quarto

Using the extension

This extension provides support and shortcode to animate.css.
Animations are only available for HTML-based documents. It provides an {{< animate >}} shortcode:

  • Mandatory <effect> and <text>:

    {{< animate <effect> "<text>" >}}

  • Optional <delay=...>, <duration=...>, and <repeat=...>:

    {{< animate <effect> "<text>" <delay=...> <duration=...> <repeat=...> >}}

    <delay=...> and <duration=...> are durations requiring unit, e.g., 1s or 800ms.
    See https://animate.style/ for more details.

For example:

Shortcode Text
{{< animate bounce "Some text" >}}

Some text
{{< animate flip "Some text" repeat=2 >}}

Some text
{{< animate hinge "Some text" delay=3s duration=4s repeat=infinite >}}

Some text

Available effects:

Attention seekers

  • bounce

  • flash

  • pulse

  • rubberBand

  • shakeX

  • shakeY

  • headShake

  • swing

  • tada

  • wobble

  • jello

  • heartBeat

Back entrances

  • backInDown

  • backInLeft

  • backInRight

  • backInUp

Back exits

  • backOutDown

  • backOutLeft

  • backOutRight

  • backOutUp

Bouncing entrances

  • bounceIn

  • bounceInDown

  • bounceInLeft

  • bounceInRight

  • bounceInUp

Bouncing exits

  • bounceOut

  • bounceOutDown

  • bounceOutLeft

  • bounceOutRight

  • bounceOutUp

Fading entrances

  • fadeIn

  • fadeInDown

  • fadeInDownBig

  • fadeInLeft

  • fadeInLeftBig

  • fadeInRight

  • fadeInRightBig

  • fadeInUp

  • fadeInUpBig

  • fadeInTopLeft

  • fadeInTopRight

  • fadeInBottomLeft

  • fadeInBottomRight

Fading exits

  • fadeOut

  • fadeOutDown

  • fadeOutDownBig

  • fadeOutLeft

  • fadeOutLeftBig

  • fadeOutRight

  • fadeOutRightBig

  • fadeOutUp

  • fadeOutUpBig

  • fadeOutTopLeft

  • fadeOutTopRight

  • fadeOutBottomRight

  • fadeOutBottomLeft

Flippers

  • flip

  • flipInX

  • flipInY

  • flipOutX

  • flipOutY

Lightspeed

  • lightSpeedInRight

  • lightSpeedInLeft

  • lightSpeedOutRight

  • lightSpeedOutLeft

Rotating entrances

  • rotateIn

  • rotateInDownLeft

  • rotateInDownRight

  • rotateInUpLeft

  • rotateInUpRight

Rotating exits

  • rotateOut

  • rotateOutDownLeft

  • rotateOutDownRight

  • rotateOutUpLeft

  • rotateOutUpRight

Specials

  • hinge

  • jackInTheBox

  • rollIn

  • rollOut

Zooming entrances

  • zoomIn

  • zoomInDown

  • zoomInLeft

  • zoomInRight

  • zoomInUp

Zooming exits

  • zoomOut

  • zoomOutDown

  • zoomOutLeft

  • zoomOutRight

  • zoomOutUp

Sliding entrances

  • slideInDown

  • slideInLeft

  • slideInRight

  • slideInUp

Sliding exits

  • slideOutDown

  • slideOutLeft

  • slideOutRight

  • slideOutUp

Advanced

The following won’t work:

{{< animate bounce "[HTML](https://m.canouil.fr/quarto-animate/)" >}}

But this will:

[[HTML](https://m.canouil.fr/quarto-animate/)]{.animate__animated .animate__bounce style="display:inline-block;"}

HTML

Or:

::: {.animate__animated .animate__bounce}
[HTML](https://m.canouil.fr/quarto-animate/)
:::

HTML