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转换不起作用

回答

相关问题