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

您的动画会跳转，因为它仅定义为＆＃34; hover＆＃34;的动画，但不会回到正常状态。

您可能不需要动画（见下文）。将其更改为转换。要将平滑更改为给定值和再次返回，通常会将此转换分配给选择器，并仅定义悬停的填充。< / p>

更改为

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

它有效。看看这个更新的小提琴： http://jsfiddle.net/ddrekkf9/4/

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

CSS3转换scaleX不改变文本

1 个答案: