Animation-name CSS

I have this question. Can you use random words as animation-name or does it have a specific set of words that can be used? Actually some of the words were not working when I tried to use them.

Hi and welcome :love_you_gesture:
The name of the animation is totally up to you, just make sure your keyframes are named the same:

.myDiv {
  animation-name: my-animation
}
@keyframes my-animation {
  ...keyframes...
}
1 Like

Do the words start with numbers?

1 Like

No it did not start with numbers. Let me try it again.

can you show the words that didn’t work?

I was using the word sparkling. I am just a beginer so I might have made a mistake somewhere in the code that I didn’t know of. I will share the code as soon as I access my computer.

Thank you so much. I will try it.

The name is of type <custom-ident> CSS data type, you can look at the rules.
https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident

1 Like