14
edits
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 = | ||