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％。看來，你不需要這個。