Animated CSS in Anvil Form?

Anvil Q&A
1

Hi,

I am looking to put some CSS animations on a Form, and I have defined a Role for this in my CSS:

.anvil-role-LeftArrow {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #000;
  animation: arrow 2s infinite;
}

@keyframes anvil-role-LeftArrow {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}

I set the Role appropriately for a form that I want it to appear on, and the arrow appears, but it is not animated.
Is there a special way to annotate the Keyframes for an animation in CSS so that they work with Roles and appear properly on the form?
What is otherwise the best way to embed animated CSS onto a form?

2

I can’t help you with the css because I don’t like to waste my time troubleshooting css.

But I had a similar problem with animations and I solve using the animation module in Anvil Extras.

Try to have a look at it, it may help you too.

1 Like
3

+1 for the Animation module in Anvil Extras. I had prototyped some CSS animations on CodePen that I then needed to move over to my Anvil app. The initial process was a bit annoying to figure out

Basically, you’ll want to remove the animation attributes and keyframes from the CSS entirely. Build that same KeyFrame series through a Transition object, then an Effect, and then/or do an .animate(), making sure you target the correct DOM element, using anvil.js.document.querySelector('.className')

https://anvil-extras.readthedocs.io/en/latest/guides/modules/animation.html

I can try and provide more info if its needed, but that’s 90% of the process, just greatly simplified

1 Like
4

If you’re sticking with css, your keyframes can be named whatever you like. And you need to refer to that name in your css animation property.

It looks like you are referring to the “arrow” keyframes but have called it something else.

I think you want this instead:


@keyframes arrow {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}

.anvil-role-LeftArrow {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #000;
  animation: arrow 2s infinite;
}
5

Hmm… I don’t quite follow you.

Previously the keyframes and the css property both had the same name (anvil-role-LeftArrow) but now it seems you have renamed the keyframes to simply “arrow”? How would the app know which property these keyframes are for?

6

See your animation property.

animation: arrow 2s infinite;

You are referencing the arrow animation name.
Which should be defined somewhere by a keyframes rule.

So either this should be

animation: anvil-role-LeftArrow 2s infinite

to match your keyframes rule name.

Or you need to change the keyframes rule name to match the animation name.

7

Ahh yes, I see now. Thank you!