28958 2009-09-03 16:57:18 -0700 Make the 'position' attribute animatable 2009-09-19 12:49:13 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) PC OS X 10.5 RESOLVED WONTFIX P2 Normal --- 0 andy webkit-unassigned dino simon.fraser oldest_to_newest 144642 0 andy 2009-09-03 16:57:18 -0700 Consider the following animation: a centered element flies into place from off one edge of the screen. With the current implementation of CSS animations, there's no way to do that because one position is fixed, and the other is relative. If the 'position' attribute were "animatable" (just for computed position purposes), this could be accomplished. 145870 1 simon.fraser 2009-09-09 11:36:53 -0700 This isn't possible, because when something is animated, every intermediate state has to be representable in CSS. There just isn't a sensible way to animate from "position:fixed" to "position:relative". 146569 2 andy 2009-09-11 08:23:26 -0700 Yeah, I see why that's a problem. Can you help me ask the right question to solve the "fly on from off-screen" problem? Perhaps the object's position at each keyframe could be computed in advance, then interpolated between with translations. That's kind of a kludge, though. Any ideas? 146929 3 simon.fraser 2009-09-12 08:52:29 -0700 Why does the initial postion have to be "fixed". Can't you just keep it as position: relative, and animated from left: -1000px to left: 0 ? 146931 4 andy 2009-09-12 09:27:01 -0700 Good question. If the object's initial position is -1000px, then the designer can't know when it will appear on the page and how long it will spend getting to its final position. He can't synchronize it with other animations because the apparent delay offset will basically depend on the window size. 146988 5 simon.fraser 2009-09-13 07:56:53 -0700 Seems like you could have some JS that gets the final position of the element (e.g. with getBoundingClientRect on an parent), then dynamically sets the initial position of the element that is going to be animated in. 148526 6 andy 2009-09-19 12:49:13 -0700 Yes, that would absolutely work; I was just hoping you folks would want to find some solution to this common-ish design pattern that didn't require a JS hack. :) Not saying the solution has to be anything like the suggestion in the title of this bug, just hoping you'll maybe keep the problem in mind when doing future revisions to the spec.