css菜單動畫沒有任何反應

我想爲我的網站做一個簡單的菜單。這應該是菜單框在盤旋時變得更長。我試着把最終結果放在我的.item：hover中，它的工作原理是，在我的懸停中設置顏色設置，以檢查它是否能看到我。然而，動畫什麼都不做，這讓我困擾。任何人都可以解釋我可以做得更好嗎？css菜單動畫沒有任何反應

@-webkit-keyframes ITEMHOVER { 
 
\t 0% { width: 17vw; } 
 
\t 5% { width: 16vw; } 
 
\t 100% { width: 22vw; } 
 
} 
 
@-moz-keyframes ITEMHOVER { 
 
\t 0% { width: 17vw; } 
 
\t 5% { width: 16vw; } 
 
\t 100% { width: 22vw; } 
 
} 
 
@-o-keyframes ITEMHOVER { 
 
\t 0% { width: 17vw; } 
 
\t 5% { width: 16vw; } 
 
\t 100% { width: 22vw; } 
 
} 
 
@keyframes ITEMHOVER { 
 
\t 0% { width: 17vw; } 
 
\t 5% { width: 16vw; } 
 
\t 100% { width: 22vw; } 
 
} 
 

 
.item:hover { 
 
\t -webkit-animation: itemHover 2s; 
 
\t -moz-animation: itemHover 2s; 
 
\t -o-animation: itemHover 2s; 
 
\t animation: itemHover 2s; 
 
\t color: #000000; 
 
}

新增片段，因爲該網站拒絕發表我的代碼，因爲他是空格鍵盲。

編輯：更改了「寬度：值;」到「變換：schaleX（value）;」。沒有工作。

編輯2：jfiddle：http://jsfiddle.net/ddrekkf9/有人要求。

來源

2014-11-22 Chris vd. Heijden

你可以把它放在jsfiddle所以我們可以試試嗎？ – nCore 2014-11-22 19:49:31

完成＃atleast15charcters – 2014-11-22 20:09:27

這是因爲動畫名稱區分大小寫，並且還必須在動畫中爲變形添加前綴。如果你這樣做：

@-webkit-keyframes ITEMHOVER { 
    0% { -webkit-transform: scaleX(1); } 
    25% { -webkit-transform: scaleX(0.90); } 
    75% { -webkit-transform: scaleX(1.25); } 
    100% { -webkit-transform: scaleX(1.20); } 
} 
@-moz-keyframes ITEMHOVER { 
    0% { -moz-transform: scaleX(1); } 
    25% { -moz-transform: scaleX(0.90); } 
    75% { -moz-transform: scaleX(1.25); } 
    100% { -moz-transform: scaleX(1.20); } 
} 
@-o-keyframes ITEMHOVER { 
    0% { -o-transform: scaleX(1); } 
    25% { -o-transform: scaleX(0.90); } 
    75% { -o-transform: scaleX(1.25); } 
    100% { -o-transform: scaleX(1.20); } 
} 
@keyframes ITEMHOVER { 
    0% { transform: scaleX(1); } 
    25% { transform: scaleX(0.90); } 
    75% { transform: scaleX(1.25); } 
    100% { transform: scaleX(1.20); } 
} 

.item:hover { 
    -webkit-animation: ITEMHOVER 2s; 
    -moz-animation: ITEMHOVER 2s; 
    -o-animation: ITEMHOVER 2s; 
    animation: ITEMHOVER 2s; 
    color: #000000; 
}

它會工作。

注：這是根據你的小提琴。在你的第一篇文章中，你試圖製作動畫寬度。只需將itemHover更改爲ITEMHOVER就可以做到。

來源

2014-11-23 04:02:55

css菜單動畫沒有任何反應

回答

相關問題