Bug 28958
| Summary: | Make the 'position' attribute animatable | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Andy Matuschak <andy> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED WONTFIX | ||
| Severity: | Normal | CC: | dino, simon.fraser |
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | PC | ||
| OS: | OS X 10.5 | ||
Andy Matuschak
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)
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
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)
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
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)
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
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.