Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Why are style assignments performed immediately after creation not animated?

Why are style assignments performed immediately after creation not animated?

Problem

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

Problem courtesy of: Steven Lu

Solution

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

so

$("#one").on('click',function(){
    var word = $("
word
"); $('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/

Solution courtesy of: Max Girkens

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Why are style assignments performed immediately after creation not animated?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×