CSS Transitions: Difference between revisions

Jump to navigation Jump to search
state freeze behavior less tentatively since dholbert confirmed the behavior
(state freeze behavior less tentatively since dholbert confirmed the behavior)
Line 51: Line 51:
* 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.
* 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, but this might not be the case...
*** After a CSS Transition is finished, I think the final value should become the new base value, and the override style should be cleared.  For a SMIL animation, a frozen animation would simply result in the override style value being maintained indefinitely rather than changing the base value
* It seems that -webkit-transition-function could be mapped fairly easily into SMIL animation's calcMode with values of 'linear' and 'spline'
* 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.
** 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

Navigation menu