On Mon, Feb 6, 2012 at 3:16 PM, Lea Verou <leaverou@gmail.com> wrote:
> On 6/2/12 20:09, Aryeh Gregor wrote:
>
>> On Mon, Feb 6, 2012 at 11:58 AM, Lea Verou<leaverou@gmail.com> wrote:
>>
>>> Yes, it is equivalent when we are talking about a static transform, but
>>> I'm
>>> afraid it's not that easy in animations.
>>> For example, how would you make an element move around in a circle
>>> without
>>> wrapper elements and without multiple origins (and of course without
>>> rotating the element itself)?
>>>
>>
>> data:text/html,<!doctype html>
>> <style>
>> @-moz-keyframes rotate {
>> from {
>> -moz-transform:translate(50px,**50px) rotate(0deg)
>> translate(-50px,-50px) rotate(0deg)
>> }
>> to {
>> -moz-transform:translate(50px,**50px) rotate(360deg)
>> translate(-50px,-50px) rotate(-360deg)
>> }
>> }
>> </style>
>> <div style="background:lime;border:**1px solid
>> black;height:50px;width:50px;
>> -moz-animation:rotate 2s linear infinite"></div>
>>
>> Works for me in Firefox 13.0a1, and in Chrome 18 dev if you change the
>> -moz- to -webkit-.
>>
>
> Works for me too, nice one! Although I still think the easier syntax that
> multiple origins would provide is needed.
>
>
How common is that case?
It seems easier to split the animation.
Rik
Received on Wednesday, 8 February 2012 00:39:13 UTC