css轉換不起作用

我覺得這在語法上是正確的，並且前綴恰當。我試圖讓這些方括號從不透明度爲0和變換位置變爲不透明度爲1，並在懸停時轉換回原來的位置。現在不透明度確實會改變，但不是在指定的轉換時間。但是變換卻根本不起作用。css轉換不起作用

我的js小提琴包括在內。

.nav-tags { 
    display: inline-block; 
} 

.nav-tags::before 
.nav-tags::after{ 
    display: inline-block; 
    opacity: 0; 
    -webkit-transition: -webkit-transform 3s, opacity 2s; 
    -moz-transition: -moz-transform 3s, opacity 2s; 
    transition: transform 3s, opacity 2s; 
} 

.nav-tags::before{ 
    margin-right: 10px; 
    content: '['; 
    opacity: 0; 
    -webkit-transform: translateX(40px); 
    -moz-transform: translateX(40px); 
    transform: translateX(40px); 
} 

.nav-tags::after{ 
    margin-left: 5px; 
    content: ']'; 
    opacity: 0; 
    -webkit-transform: translateX(-40px); 
    -moz-transform: translateX(-40px); 
    transform: translateX(-40px); 
} 

.nav-tags:hover::before, 
.nav-tags:hover::after, 
.nav-tags:focus::before, 
.nav-tags:focus::after { 
    opacity: 1; 
    -webkit-transform: translateX(500px); 
    -moz-transform: translateX(500px); 
    transform: translateX(500px); 
} 
`

https://jsfiddle.net/6dpncer1/

來源

2016-04-20 Paul Thorpe

你缺少的選擇之間的逗號（'.nav標籤::前 .nav標籤:: {後'）等'transition'屬性甚至不適用於這兩個僞元素。 – Harry

哇，謝謝。我以爲我瘋了 –

有引起的代碼的其餘部分將被忽略語法錯誤。

.nav-tags::before // missing a comma here 
.nav-tags::after{ 
    display: inline-block; 
    opacity: 0; 
    -webkit-transition: -webkit-transform 3s, opacity 2s; 
    -moz-transition: -moz-transform 3s, opacity 2s; 
    transition: transform 3s, opacity 2s; 
}

修復此得到的一切又正常工作：https://jsfiddle.net/6dpncer1/1/

來源

2016-04-20 15:48:27 Quantastical

css轉換不起作用

回答

相關問題