Problems using CSS online code generator and webstyles

I had followed Lars Lehmann tutorial (

  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:
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 ???