javascript - Is it possible to fade in newly created elements using only css3? - Stack Overflow

admin管理员组

文章数量:1225011

I am working with a chat script. I have no control over any javascript, only CSS. I was wondering if it is possible to get the posts to fade in, as they are added, with only CSS3.

Here is a simplified example of the chat script:

/

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

Is there any CSS3 (only CSS3, no javascript) I could add to the script above to make the new "posts" fade in?

I am working with a chat script. I have no control over any javascript, only CSS. I was wondering if it is possible to get the posts to fade in, as they are added, with only CSS3.

Here is a simplified example of the chat script:

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>

Is there any CSS3 (only CSS3, no javascript) I could add to the script above to make the new "posts" fade in?

• javascript
• html
• css

Share Improve this question Follow asked Oct 1, 2013 at 5:42 supercoolvillesupercoolville 9,0862121 gold badges5555 silver badges7070 bronze badges 1

• possible duplicate of CSS transition fade in – ColinE Commented Oct 1, 2013 at 5:45

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 18

Here you go...

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

Check out this fiddle...jsfiddle

You could use something like this:

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

本文标签： javascriptIs it possible to fade in newly created elements using only css3Stack Overflow