Problems using CSS online code generator and webstyles

Targets Web
1

I had followed Lars Lehmann tutorial (https://forum.xojo.com/23367-tutorial-using-css-in-webapps-to-make-your-webapp-more-beautifu/0)

  1. I create “my.css”.
  2. I place it at: my_ip_address/XOJO_Resourses
  3. Into the App.HTMLHeader property I added:

The problems is that when I include in my.css the code generated at: https://coveloping.com/tools/css-animation-generator
as follows:
#animated-example {
background: #cd4436;
height: 200px;
margin: 20px auto;
width: 300px;
box-shadow: inset 0 0 7px rgba(0,0,0,0.7);
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}

it is supposed that I have to create a WebStyle that calls the class=“animated bounceIn” and assign that Style to an object
To do so I had to create a WebStyle named “animated bounceIn” and assing it to the web object this WebStyle

But XOJO does not let me name a WebStyle with a double word name.

Someone has something to suggest ???

Thanks
Mariano