How to use this anamated background css on parts of the page?

[blow]

Hi i found this code to animate different colors, but when i put it on the custom css section of my wordpress site, it applys to the whole page.

body {
animation: colorchange 50s; /* animation-name followed by duration in seconds*/
/* you could also use milliseconds (ms) or something like 2.5s */
-webkit-animation: colorchange 50s; /* Chrome and Safari */
}

@keyframes colorchange
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
75% {background: green;}
100% {background: red;}
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
75% {background: green;}
100% {background: red;}
}

Source: https://codepen.io/metagrapher/pen/tgcLl


How do i make it so i can call it somthing like:
anamated-bk
Then use that class or id when im making pages in elementor. I know its something to do with changing it from body, but i cant work it out.
Any help would be great.

 

[blow]

Nevermind, ive done it now...

 

[Saint Gabriel]

Okay, great. It's a CSS for particles.

Nice that you have found out a quick solution.