RESOLVED WONTFIX 28958
Make the 'position' attribute animatable 
https://bugs.webkit.org/show_bug.cgi?id=28958
Summary Make the 'position' attribute animatable
Andy Matuschak
Reported 2009-09-03 16:57:18 PDT
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.
Attachments
Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2009-09-09 11:36:53 PDT
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".
Andy Matuschak
Comment 2 2009-09-11 08:23:26 PDT
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?
Simon Fraser (smfr)
Comment 3 2009-09-12 08:52:29 PDT
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 ?
Andy Matuschak
Comment 4 2009-09-12 09:27:01 PDT
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.
Simon Fraser (smfr)
Comment 5 2009-09-13 07:56:53 PDT
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.
Andy Matuschak
Comment 6 2009-09-19 12:49:13 PDT
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.
Note You need to log in before you can comment on or make changes to this bug.