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