- From: Dean Jackson <dino@apple.com>
- Date: Thu, 3 Dec 2009 11:15:08 +1100
- To: Brendan Kenny <bckenny@gmail.com>
- Cc: "L. David Baron" <dbaron@dbaron.org>, www-style@w3.org
>
> 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.
Received on Thursday, 3 December 2009 00:15:50 UTC