quarto slide revealjs animate image

[shannon.pileggi]

Hi!

I am using quarto revealjs slides and I am interested in "animating" an image to make it appear as if waving back and forth. For example, I'd like for the image of the posit logo to rotate between -45 and 45 degrees for a back and forth effect. Is that possible? Thank you!!

---
title: "Untitled"
format: revealjs
editor: visual
---

## A slide

*  one
*  two
*  three

![](https://posit.co/wp-content/uploads/2022/09/posit.svg){.absolute bottom=50 right=50 width="200" style="transform: rotate(45deg);"}

[antdurrant]

This flavour of animation is totally doable with just CSS!

---
title: "animation"
format: revealjs
---

<style>

@keyframes rotate {
  0% {transform: rotate(-45deg);}
  50% {transform: rotate(45deg);}
  100% {transform: rotate(-45deg);}
}

.rotate{
    animation-name:rotate;
    animation-duration:2s;
    animation-iteration-count: infinite;
}

</style>


## A slide

*  one
*  two
*  three


![](https://posit.co/wp-content/uploads/2022/09/posit.svg){.rotate .absolute bottom=50 right=50 width="200"}

(and if you set up the image to be rotated -45deg from the start, you only need the 50% keyframe)

[shannon.pileggi]

@antdurrant

.rotate

Aaahhh thank you so much @antdurrant! That is so super fun, and I am excited to put the functionality in my presentation!!