CSS3变换scaleX不改变文字

Question

我想制作一个滑动到右侧的菜单。但是，当我删除鼠标时，我希望它恢复到原来的速度。

这里是我的代码：

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

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

 
.item:hover { 
 
\t -webkit-animation: itemHover 1s; 
 
\t -moz-animation: itemHover 1s; 
 
\t -o-animation: itemHover 1s; 
 
\t animation: itemHover 1s; 
 
\t color: #000000; 
 
\t 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; 
} 

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

事实上，如果您想要在一段时间内将一个属性更改为多个值，则优先考虑动画。将填充更改为给定时间的10px至10％，然后将时间缩短为30px，时间为20％，并在另一剩余时间减慢至60px，达到100％。看来，你不需要这个。