- From: Brendan Kenny <bckenny@gmail.com>
- Date: Wed, 2 Dec 2009 18:27:14 -0600
- To: Dean Jackson <dino@apple.com>
- Cc: "L. David Baron" <dbaron@dbaron.org>, www-style@w3.org
On Wed, Dec 2, 2009 at 6:15 PM, Dean Jackson <dino@apple.com> wrote:
>>
>> David's proposal would make a non-linear animation appear linear. The
>> top left corner of your skewed box, for instance, would animate
>> linearly (with respect to the transition function) from its skewed
>> position back to 0, matching the rectangle above.
>
> Here's a testcase that shows what I mean in WebKit.
>
> [[[
>
> <style>
>
> div {
> background-color: red;
> position: relative;
> width: 100px;
> height: 100px;
> }
>
> #a {
> -webkit-animation: move1 2s infinite linear alternate;
> }
>
> #b {
> background-color:blue;
> -webkit-animation: move2 2s infinite linear alternate;
> -webkit-transform-origin: bottom left;
> }
>
> @-webkit-keyframes move1 {
> from { -webkit-transform: translateX(100px); }
> to { -webkit-transform: translateX(0); }
> }
>
> @-webkit-keyframes move2 {
> from { -webkit-transform: skewX(-45deg); }
> to { -webkit-transform: skewX(0); }
> }
>
> </style>
>
> <div id=a></div>
> <div id=b></div>
>
> ]]]
>
>
>
>
>
>>
>> This is probably more useful, but my point above was that this is
>> typically referred to as a shear, not the skew (specified with an
>> angle) that the user asked for.
Changing move2 to the following will give you the equivalent of
David's proposal (what could be considered shearX(-1)):
@-webkit-keyframes move2 {
from { -webkit-transform: matrix(1,0,-1,1,0,0); }
to { -webkit-transform: matrix(1,0,0,1,0,0); }
}
Received on Thursday, 3 December 2009 00:27:53 UTC