Animate.css Extension for Quarto
This extension provides support and shortcode to animate.css.
Animations are only available for HTML-based documents.
Installing
quarto install extension mcanouil/quarto-animate
This will install the extension under the _extensions
subdirectory.
If you're using version control, you will want to check in this directory.
Using
To animate a text, use the {{< animate >}}
shortcode. For example:
{{< animate bounce "Some text" >}}
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.
Animation 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
.
Example
Here is the source code for a minimal example: example.qmd.
This is the output of example.qmd
for HTML.