Question

我试图为我的网站制作一个简单的菜单。它应该是当盘旋时菜单框变得更长。我尝试将最终结果放在我的.item中：悬停，这有效，我在悬停中设置了颜色，以检查它是否看到了我。然而，动画什么都不做，这让我感到困扰。谁能解释一下我能做得更好。

＆＃13;

@-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;
}

＆＃13;

添加了代码段，因为该网站拒绝发布我的代码，因为他的空格键是盲目的。

编辑：更改了＆＃34; width：value;＆＃34; to＆＃34; transform：schaleX（value）;＆＃34;。没有工作。

Edit2：jfiddle：http://jsfiddle.net/ddrekkf9/有人要求。

Answer 1

这是因为动画名称区分大小写，并且您还必须在动画中为变换添加前缀。如果你这样做：

@-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即可完成。

css菜单动画没有任何反应

1 个答案: