CSS Transitions: Difference between revisions

→‎Comparison with SMIL animations: add information about the diferences between SMIL and CSS transitions regarding mapping between an animation and an element
(→‎Comparison with SMIL animations: add information about the diferences between SMIL and CSS transitions regarding mapping between an animation and an element)
Line 63: Line 63:
** We would just have to map the non-linear CSS keywords (e.g. ease-out, ease-in, etc) to a set of cubic bezier control points.
** We would just have to map the non-linear CSS keywords (e.g. ease-out, ease-in, etc) to a set of cubic bezier control points.
* Both specs treat a negative start time (called 'delay' in CSS transitions) in the same way (e.g. start the animation immediately but act as if you had started in the past)
* Both specs treat a negative start time (called 'delay' in CSS transitions) in the same way (e.g. start the animation immediately but act as if you had started in the past)
* SMIL transitions are always 1:1.  In other words, a given animation element specifies a single target element and attribute to be animated.  By contrast, a CSS transition can specify that it applies to a property of 'all' (which means that any style property change will be animated), and a given transition definition can apply to any (or all) elements of a document (based on what elements are matched by the style selector)
** Because of this, it's not feasible for CSS animations to be treated the same way that SMIL animations are treated (e.g. all animation definitions are added to a list of animations when a document is loaded/parsed).  If we did that for CSS transitions, we could end up with thousands of elements in the animation list, and most of them would probably never be used.
** The approach we'll most likely need to use for CSS transitions is to detect a change in a property that has a transition applied to it.  At that point, we can dynamically create an animation that maps to a single element and property, and add it to the animation list.  Then when the animation is finished, we should remove it from the animation list.


= Interaction with SMIL Animations in SVG content =
= Interaction with SMIL Animations in SVG content =
14

edits