CSS3 转换 scaleX 不改变文本

Question

我想制作一个当鼠标悬停在上面时向右滑动的菜单。但是，当我取下鼠标时，我希望它以与取出时相同的速度返回。

这是我的代码:

.item {
	position: relative;
	background-color: #A14B00;
	height: 2em;
	width: 17vw;
	margin-bottom: 0.5em;
	margin-left: -12vw;
	line-height: 2em;
	padding-left: 13vw;
	color: #FFFFFF;
	font-size: 2em;
	font-family: "League Gothic", "bebas neue", "Arial Narrow", Arial, sans-serif;
}

@-webkit-keyframes itemHover{
	0% { padding-right: 0vw; }
	100% { padding-right: 3vw; }
}
@-moz-keyframes itemHover{
	0% { padding-right: 0vw; }
	100% { padding-right: 3vw; }
}
@-o-keyframes itemHover{
	0% { padding-right: 0vw; }
	100% { padding-right: 3vw; }
}
@keyframes itemHover{
	0% { padding-right: 0vw; }
	100% { padding-right: 3vw; }
}

.item:hover {
	-webkit-animation: itemHover 1s;
	-moz-animation: itemHover 1s;
	-o-animation: itemHover 1s;
	animation: itemHover 1s;
	color: #000000;
	padding-right: 3vw;
}

避免与网站代码冲突的代码段

http://jsfiddle.net/ddrekkf9/3/

有人可以提出一个解决方案，在开始时不运行动画。

Answer 1

您的动画会跳跃，因为它仅定义为“悬停”动画，但不会返回到正常状态。

您可能不需要动画(见下文)。将其更改为过渡。要给定值和再次返回的平滑变化，通常将此转换分配给选择器并仅定义悬停的填充。

更改为

.item {
   -webkit-transition: padding-right 1s;
   -moz-transition: padding-right 1s;
   -o-transition: padding-right 1s;
   transition: padding-right 1s;
}
.item:hover {
    color: #000000;
    padding-right: 3vw;
}

并且有效。查看这个更新的 fiddle : http://jsfiddle.net/ddrekkf9/4/

事实上，如果您想在一段时间内将一个属性更改为多个值，例如，动画是首选。将填充更改为 10px 到给定时间的 10%，然后在 20% 的时间内更改为 30px，并在另一个剩余时间减慢到 60px 到 100%。看来，你不需要这个。