Rotate Bubble

There are two Custom Code snippets that are responsible for this animated bubble border hover animation:

Rotate Bubble Animation - CSS (head)
Rotate Bubble Animation - JS (body - end)

![](/assets/images/ata/Custom_Script_ Bubble_Rotate.webp)

#Backup Code Copies

Rotate Bubble Animation - CSS

<style>
.rotate-bubble {
animation: rotatebubble 5s infinite linear;
}

@keyframes rotatebubble {
from { transform: rotate(0deg) }
to { transform: rotate(359deg) }
}
</style>

Rotate Bubble Animation - JS

<script>
let hoverBubbles = document.querySelectorAll('[data-src*="BubbleHover.png"]');
hoverBubbles.forEach((hoverBubble) => {
    hoverBubble.classList.add("rotate-bubble");
});
</script>