GWT - CSS動畫不工作

[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動畫。

您的幫助將不勝感激。

問候，格林

來源

2014-10-27 Glyn

我一直在試驗，發現變化：

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

到

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

作品。請耐心等待;我是這個新手。

問候，

格林

來源

2014-10-28 03:10:53 Glyn

GWT - CSS動畫不工作

回答

相關問題