css menu animation nothing happens - css

Question

I'm trying to make a simple menu for my website. It's supposed to be that the menu boxes become longer when hovered over. I tried putting the end-result in my .item:hover, which worked, I have the color setting in my hover to check if it sees me. However, the animation does nothing, which bothers me. Could anyone explain what I could do better.
#-webkit-keyframes ITEMHOVER {
0% { width: 17vw; }
5% { width: 16vw; }
100% { width: 22vw; }
}
#-moz-keyframes ITEMHOVER {
0% { width: 17vw; }
5% { width: 16vw; }
100% { width: 22vw; }
}
#-o-keyframes ITEMHOVER {
0% { width: 17vw; }
5% { width: 16vw; }
100% { width: 22vw; }
}
#keyframes ITEMHOVER {
0% { width: 17vw; }
5% { width: 16vw; }
100% { width: 22vw; }
}
.item:hover {
-webkit-animation: itemHover 2s;
-moz-animation: itemHover 2s;
-o-animation: itemHover 2s;
animation: itemHover 2s;
color: #000000;
}
Added snippet because the website refused to post my code because he's spacebar-blind.
Edit: Changed the "width: value;" to "transform: schaleX(value);". Didn't work.
Edit2: jfiddle: http://jsfiddle.net/ddrekkf9/ someone requested.

Answer 1

It's because the animation name is case sensitive, and also you have to prefix the transforms in your animation. If you do this:
#-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;
}
It will work.
NOTE: This was according to your fiddle. In your initial post, you were trying to animate width. Simply changing itemHover to ITEMHOVER would've done it.