Question

Opening this fiddle on Webkit will show what I’m talking about.

How can I specify an element’s style when it is first specified, and then its final state?

It should be possible to specify a single step animation fully this way (without having to start using @keyframes) but it seems like there is a lot of implementation specific strangeness I must deal with at this point. Note how in Firefox no animation is performed…

Answer 1

Seems to be the same issue as described here: CSS3 transitions to dynamically created elements

so

$("#one").on('click',function(){
    var word = $("<div style='opacity: 0; height:0'>word</div>");
    $('body').prepend(word); 
    window.getComputedStyle(word[0]).getPropertyValue("top");
    word.css({height: 100, opacity: 1});
});

also works in this case: http://jsfiddle.net/wWnnH/3/