HTML Animated Elements in Quarto

To make my website a little more fun, and a bit more distinctive I have a couple of animated HTML elements. These elements are very easy to add in but are not very well documented anywhere.

Adding in these elements allows us to do things like this:

To get this working there are a few things we need to line up. First, we need to install the Quarto Animate plugin, which is an implementation of the widely used Animate.css library. This can be done by running this code from the terminal in the directory where your quarto site is located.

quarto add mcanouil/quarto-animate@1.6.1

If we want to animate text, as I do for the little terminal block █ in the header for the website this is fairly straight forward. All we have to do is include the shortcode directly in our .qmd file and it will be rendered automatically. For example:

{{< animate flash '█' animation-duration: 20s repeat=infinite >}}

Here we are simply telling Quarto to use animate for this section; the flash animation which we have chosen; our text (any unicode charecter or emoji 🪿 will work; how long we want the animation-duration to last, which we can speed up or slow down by changing the 20s; and how many times we want this to repeat. The Animate.css guidelines warn against infinite repetitions as bad UX design, so use this carefully, particularly for the many entry and exit animations.

However, if we want to apply these effects to an image or other element on our site this is a little more complex. As the above code uses the Animate plugin’s shortcode it won’t recognize images. Instead, we need to call directly to the underlying functions of Animate.css after our image has been rendered. For example this code which is used for the image above:

![](assets/DoS.webp){.animate__animated .animate__pulse .animate__slow .animate__infinite width="50%" fig-align="center"}

Here we are specifying that this image should be animated using (.animate__animated), which animation to use (.animate__pulse), its speed (.animate__slow), and how long this should last (.animate__infinite), then we have the rest of our Quarto options where we can set the size of the image.