Javascript 是否可以仅使用css3淡入新创建的元素？

我正在使用聊天脚本我无法控制任何javascript，只能控制CSS。我想知道是否有可能让帖子在添加时淡入，只使用CSS3

下面是聊天脚本的简化示例：

$（“a.click”）。单击（函数（）{
$（“div.stuff”）.append（“文本”）；
});

---

是否有任何CSS3（只有CSS3，没有javascript）可以添加到上面的脚本中，以使新的“帖子”淡入淡出？

您可以使用以下内容：

<code>
    .lol {
        opacity: 0;
        -webkit-transition: opacity 2s ease-in;
        -moz-transition: opacity 2s ease-in;
        -o-transition: opacity 2s ease-in;
        -ms-transition: opacity 2s ease-in;
        transition: opacity 2s ease-in;
    }​
</code>

给你

div.click {
    background:yellow;
    display:inline;
}
div.lol {
    padding:5px;
    border:1px solid green;
    margin:5px 0;
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    /* Firefox */
    -webkit-animation: fadein 2s;
    /* Safari and Chrome */
    -o-animation: fadein 2s;
    /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein {
    /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein {
    /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein {
    /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

---

查看此提琴…

注意，可能您的组件需要一个

显示：块

来处理动画。这不起作用，因为新元素不会转换其css属性，它只需从给定的不透明度开始

div.click {
    background:yellow;
    display:inline;
}
div.lol {
    padding:5px;
    border:1px solid green;
    margin:5px 0;
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    /* Firefox */
    -webkit-animation: fadein 2s;
    /* Safari and Chrome */
    -o-animation: fadein 2s;
    /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein {
    /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein {
    /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein {
    /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}