css - :after transition doesn't work

Question

为什么过渡在伪元素 :after/:before 中不起作用。

我只是想把它放在我的 css 中，但是不行，行不通。

.edicao-fotos-2 li a:hover{
transition:0.6s;
-o-transition:0.6s;
-ms-transition:0.6s;
-moz-transition:0.6s;
-webkit-transition:0.6s;
}

.edicao-fotos-2 li a:hover:after{
content: '';
width:244px;
height:243px;
background:rgba(0, 0, 0, 0.6);
position:absolute;
top:-228px;
left:0;
transition:0.6s;
-o-transition:0.6s;
-ms-transition:0.6s;
-moz-transition:0.6s;
-webkit-transition:0.6s;
}

谢谢大家

Answer 1

.edicao-fotos-2 li a:after 没有任何默认值。

/**
 * example values:
 * this will animate width and height
 */
.edicao-fotos-2 a:after {
    content: "";
    width: 0;
    height: 0;
}

.edicao-fotos-2 li a:hover:after{
    content: '';
    width:244px;
    height:243px;
    background:rgba(0, 0, 0, 0.6);
    position:absolute;
    top:-228px;
    left:0;

    -webkit-transition:0.6s;
       -moz-transition:0.6s;
        -ms-transition:0.6s;
         -o-transition:0.6s;
            transition:0.6s;
}

如果您不应用默认值，浏览器将不知道如何启动您的动画。

DEMO

注意:您还应该编写以供应商前缀开头的转换规则，而不是相反。