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

Question

我正在使用聊天脚本.我无法控制任何JavaScript,只有CSS.我想知道是否有可能让帖子淡入,因为它们被添加,只有CSS3.

以下是聊天脚本的简化示例:

http://jsfiddle.net/CF4pj/1/

<a class="click" href="#/">click</a>

<div class="stuff"></div>

<script>

$("a.click").click(function() {
    $("div.stuff").append("<div class='lol'>text text text text text</div>");
});

</script>

有没有CSS3(只有CSS3,没有javascript)我可以添加到上面的脚本,使新的"帖子"淡入？

Answer 1

干得好...

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;
    }
}

看看这个小提琴...... jsfiddle