This does not exactly answer your question, but transitions are very easy to do in CSS. (I don't use animations much, so can't comment.)
Here's a piece of CSS from a recent project that does a transition when the user hovers the mouse over an element, a disclosure chevron, in an outliner control. It makes the element a bit larger and darker, a subtle, but noticeable change.
The base element:
.tree-control--chevron-div {
...
font-size: 70%;
color: var(--chevron-color);
opacity: 0.9;
transition: opacity 0.3s, font-size 0.3s, color 0.3s ease-in-out;
...
}
The CSS for the hover:
.tree-control--chevron-div:hover {
font-size: 75%;
opacity: 1;
color: black;
}
The base class for the element specifies how the transition should happen. The CSS for the pseudo-class specifies what it should transition too.
The problem with doing this in Reagent, as far as I know, is that there is no way to specify the behavior of pseudo-elements.
If you don't mind adding another dependency, garden
is a library for adding CSS to Clojure apps. It has a syntax very similar to Hiccup. There is also stylefy
for ClojureScript. Both have slightly extended Hiccup-like syntax to handle pseudo-elements like hover.
If you really want an animation, I can't help. Sorry for wasting your time.