GWT - CSS анимация не работает

Question

я следовал учебник в [CSS3 Animations] [1]

[1]: http://www.w3schools.com/css/css3_animations.asp и не могу заставить его работать. У меня есть война \ GWTCustomAnimation.css, в котором у меня есть копия/прошлый код в конец файла:

div { 
    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */ 
    animation: myfirst 5s; 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes myfirst { 
    from {background: red;} 
    to {background: yellow;} 
} 

/* Standard syntax */ 
@keyframes myfirst { 
    from {background: red;} 
    to {background: yellow;} 
} 

А потом, как испытание, изменили мою GWT код Java поэтому стиль подхватывает «myfirst «для кнопки:

//Create the colour choice buttons and add them to the HorizontalPanel "headingContainer". 
//Pencil 
final Button pencilButton = new Button("P"); 
//pencilButton.addStyleName("pencilButton"); 
pencilButton.addStyleName("myfirst"); 
headingContainer.add(pencilButton); 
//Set the pencil colour to pencil. 
pencilButton.addClickHandler(new ClickHandler() { 
    public void onClick(ClickEvent event) { 

     pencilColour = "black"; 
    } 
}); 

Когда я запускаю или останавливаю приложение, вся страница идет от красного к желтому, чтобы очистить. Однако у «pencilButton» нет фона. Я ожидаю, что «pencilButton» пройдет от красного до желтого до красного. Я тестирую версию Chrome 38.0.2125.104 m.

Я попытался добавить как мне нужно это для цвета фона для работы на кнопку для стиля «pencilButton» «важно!»:

.pencilButton { 
    width: 28px; 
    height: 28px; 
    background: black !important; 
} 

Это не имело никакого влияния на этот раз.

Как только у меня будет эта простая тестовая работа, я планирую попробовать анимацию CSS 3D.

Ваша помощь будет принята с благодарностью.

С уважением, Глин

Answer 1

Я экспериментировал и обнаружил, что изменение:

div { 
    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */ 
    animation: myfirst 5s; 
} 

в

.myfirst { 
    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */ 
    animation: myfirst 5s; 
} 

работ. Будьте терпеливы; Я новичок в этом.

С уважением,

Глин