14
edits
CSS Transitions: Difference between revisions
→Comparison with SMIL animations
| Line 44: | Line 44: | ||
== Comparison with SMIL animations == | == Comparison with SMIL animations == | ||
It would be very nice if we could share as much code as possible between the CSS Transitions feature and SMIL animation. dholbert already has a patch to animate CSS with SMIL described at [SVG:SMIL+CSS]. Here I'll list a few thoughts about how SMIL animation and CSS transitions compare (disclaimer: I have only read through the SMIL animation spec quickly, so I might not have a full understanding of the details of SMIL animation) | It would be very nice if we could share as much code as possible between the CSS Transitions feature and SMIL animation. dholbert already has a patch to animate CSS with SMIL described at [[SVG:SMIL+CSS]]. Here I'll list a few thoughts about how SMIL animation and CSS transitions compare (disclaimer: I have only read through the SMIL animation spec quickly, so I might not have a full understanding of the details of SMIL animation) | ||
* Animation triggers are significantly different | * Animation triggers are significantly different between SMIL animation and CSS transitions | ||
** SMIL animations are triggered by external events such as a mouse click or an elapsed time, etc. | ** SMIL animations are triggered by external events such as a mouse click or an elapsed time, etc. | ||
** As mentioned above, CSS Transitions are ''implicit'' animations. The animation is only caused by an event ''indirectly'' insofar as that event causes the style property to change. (This adds a lot of complexity since the transition will need to animate the property from the old value to the new value, but we don't want those style changes to start a new animation). | ** As mentioned above, CSS Transitions are ''implicit'' animations. The animation is only caused by an event ''indirectly'' insofar as that event causes the style property to change. (This adds a lot of complexity since the transition will need to animate the property from the old value to the new value, but we don't want those style changes to start a new animation). | ||
* SMIL animation is by default | * SMIL animation is not by default a permanent change. After a SMIL animation is finished, the animating value is removed and the base (original) value is allowed to 'show through' again. This is different than CSS Transitions since CSS Transitions is a simple animation from one base value to a new base value. | ||
** I know that SMIL animations can 'freeze' the animation after it is finished, but this seem like a slightly different concept | ** I know that SMIL animations can 'freeze' the animation after it is finished, but this seem like a slightly different concept | ||
*** After a CSS Transition is finished, I think the final value should become the new base value, and the override style should be cleared. My understanding of SMIL animation is that a frozen animation would simply result in the override style value being maintained indefinitely. | *** After a CSS Transition is finished, I think the final value should become the new base value, and the override style should be cleared. My understanding of SMIL animation is that a frozen animation would simply result in the override style value being maintained indefinitely, but this might not be the case... | ||
* It seems that -webkit-transition-function could | * It seems that -webkit-transition-function could be mapped fairly easily into SMIL animation's calcMode with values of 'linear' and 'spline' | ||
** 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) | ||