css - GWT - CSS 动画不工作

Question

我已经按照[CSS3 Animations][1]中的教程学习了

[1]: http://www.w3schools.com/css/css3_animations.asp并且无法让它工作。我有一个 war\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 代码，使样式为 Button 选择“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 进行测试。

我尝试添加“!important”，因为我需要它来使背景颜色在“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;
 }

有效。请耐心等待；我是这方面的新手。

问候，

格林