- From: Kari Pihkala <kari.pihkala@gmail.com>
- Date: Mon, 22 Jun 2015 09:20:27 +0300
- To: Amelia Bellamy-Royds <amelia.bellamy.royds@gmail.com>
- Cc: Shane Stephens <shans@google.com>, "public-fx@w3.org" <public-fx@w3.org>
2015-06-22 7:27 GMT+03:00 Amelia Bellamy-Royds <amelia.bellamy.royds@gmail.com>:
> Keywords also complicate the animatability of the property. And since this
> property is all about animation, that should be a significant factor.
You could simplify animatability even further by removing the angle
from motion-rotation. It can be written as a transform:
0% { motion-offset: 0; }
40% { motion-offset: 100%; }
50% { motion-offset: 100%; transform: rotate(180deg); }
90% { motion-offset: 0; transform: rotate(180deg); }
100% { motion-offset: 0; }
Animating a property with only one purpose (animation-rotation: auto
without the angle) is simpler than animating a dual-purpose property
(auto+angle).
If the CSS Transform Module Level 2 [1] had 'motion' before 'rotate',
then the example could be even simpler:
0% { motion-offset: 0; }
40% { motion-offset: 100%; }
50% { motion-offset: 100%; rotate: 180deg; }
90% { motion-offset: 0; rotate: 180deg; }
100% { motion-offset: 0; }
I find it a bit weird that [1] defines 'translate', 'rotate' and
'scale' to be before 'motion', not after. Usually, you don’t want to
rotate or scale the entire motion-path.
Also, should 'motion-rotation’ be 'motion-rotate' to match ’rotate’?
Will the different ways to name things be confusing?
BR,
Kari
[1] http://dev.w3.org/csswg/css-transforms-2/
Received on Monday, 22 June 2015 06:20:56 UTC