Can I animate absolute positioned element with CSS transition?

Question

I want to animate an element's position change with CSS transition, but it is not working even when I use the transition on all properties, as in the example here: http://jsfiddle.net/yFy5n/3/

However, I don't want my final solution to apply transition to all properties, but instead only on the position change. So the color change should be instant, only the position change from left to right should be animated (the opposite of what is happening now).

Since no one mentioned it: the left property defaults to auto. Transitions will never work if one of the start or end points is that value. Both have to be defined. The reason why the margin solution in the answer below works is because all four sides of the margin default to 0, so it has that defined value set already. — animuson
– animuson ♦, Commented Jul 26, 2014 at 16:56
@animuson Yup. Someone cleared all the comments, but you can see here that the original OPs version worked on an earlier version of Chrome, pretty weird. — Shomz
– Shomz, Commented Jul 26, 2014 at 17:01

ChristopherStrydom · Accepted Answer · 2014-07-26 16:44:46Z

123

You forgot to define the default value for left so it doesn't know how to animate.

.test { left: 0; transition:left 1s linear; }

See here: http://jsfiddle.net/shomz/yFy5n/5/

edited Jul 26, 2014 at 16:44

ChristopherStrydom

8,4165 gold badges25 silver badges35 bronze badges

answered Jul 26, 2014 at 16:36

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Marcos Aguayo Over a year ago

For more compatibility you can use JS $('#test').animate({'left': 60 });

Harry Over a year ago

@Shomz: Thanks mate. Not sure how it is working for me (?!). I am on Chrome v24 with Windows

Digital Ninja Over a year ago

Thank you (i expected it to assume the default left, so i never thought to define it myself); however, what change should i do to get only the position to transition, not the color?

Shomz Over a year ago

@Harry Yeah, funny thing. I'm on Chrome v36. Just tried Chromium and nothing. Sounds like they are handling initial values differently.

Shomz Over a year ago

@ImNotMike You're welcome. To narrow it down, just set left instead of all: jsfiddle.net/shomz/yFy5n/14

Hbirjand · Accepted Answer · 2014-07-26 16:53:20Z

Please Try this code margin-left:60px instead of left:60px

please take a look: http://jsfiddle.net/hbirjand/2LtBh/2/

as @Shomz said,transition must be changed to transition:margin 1s linear; instead of transition:all 1s linear;

Not sure why someone downvoted this. It avoids the left bug just fine. +1 from me. Btw. since OP want only position shift, transition can be modified to margin: jsfiddle.net/shomz/2LtBh/1

gkrls · Accepted Answer · 2014-07-26 16:39:35Z

1

try this:

.test { position:absolute; background:blue; width:200px; height:200px; top:40px; transition:left 1s linear; left: 0; }

answered Jul 26, 2014 at 16:39

gkrls

2,6642 gold badges17 silver badges30 bronze badges

1 Comment

Chris Baker Over a year ago

Can you expand a little on why "this" is going to work? That will make this answer useful for someone else in the future with a problem that is similar but not exactly the same.

Collectives™ on Stack Overflow

Can I animate absolute positioned element with CSS transition?

3 Answers 3

5 Comments

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

1 Comment

Linked

Related