- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Wed, 8 Aug 2012 09:23:27 -0700
- To: Brad Kemper <brad.kemper@gmail.com>
- Cc: Brian Manthos <brianman@microsoft.com>, "Aharon (Vladimir) Lanin" <aharon@google.com>, www-style list <www-style@w3.org>, Kang-Hao Lu <kennyluck@csail.mit.edu>
On Wed, Aug 8, 2012 at 8:52 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
> On Aug 8, 2012, at 7:33 AM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
>> On Tue, Aug 7, 2012 at 11:44 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
>>> On Aug 7, 2012, at 12:42 PM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
>>>> Definitely agree, though if I explored this in more detail, I'd do it
>>>> with an @image at-rule that was basically creating a simplified form
>>>> of SVG filters/etc in CSS.
>>>
>>> That sounds like it'd be harder to animate.
>>
>> Not necessarily. You'd "just" define the way in which animating an
>> <image-graph> or whatever works, which would involve animating the
>> sub-properties. I highly doubt you'd ever want to animate just some
>> of the parts of it, after all.
>
> Can you elaborate with what that would look like?
Sure. This is just a sketch, mind you - don't assume that any syntax
shown here is anything like what I might eventually want to go with.
@image foo {
src: "foo.jpg";
transform: rotate(30deg);
size: 50px 100px;
repeat: repeat;
}
@image bar {
src: "bar.jpg";
size: 200px 200px;
repeat: repeat;
}
foo { background-image: image(foo); transition: background-image .5s linear; }
foo:hover { background-image: image(bar); }
Halfway through the transition, the background-image is something that
looks the same as:
@image halfway-between-foo-and-bar {
src: cross-fade("foo.jpg", "bar.jpg", 50%);
transform: rotate(15deg);
size: 125px 150px;
repeat: repeat;
}
~TJ
Received on Wednesday, 8 August 2012 16:24:14 UTC