CSS Transitions: Difference between revisions

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 not a permanent change.  After a SMIL animation is finished, the animating value is removed and the base 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.
* 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 map 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.
* 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)
14

edits