14
edits
CSS Transitions: Difference between revisions
→Under-specified Behavior
(add initial content about css transitions) |
|||
| Line 36: | Line 36: | ||
Some things are not specified well in the CSS Transitions spec, so I've had to look at webkit's behavior for the intended behavior (or ask Dave Hyatt in some cases). The following are some of my findings: | Some things are not specified well in the CSS Transitions spec, so I've had to look at webkit's behavior for the intended behavior (or ask Dave Hyatt in some cases). The following are some of my findings: | ||
* If the sub-properties are specified separately but there are unequal values specified, they should be handled in the same way that [http://www.w3.org/TR/css3-background/#layering Multiple Backgrounds] are handled in CSS3 | * If the sub-properties are specified separately but there are unequal values specified, they should be handled in the same way that [http://www.w3.org/TR/css3-background/#layering Multiple Backgrounds] are handled in CSS3 | ||
** That spec doesn't really address how to handle values of 'inherit' in combination with the 'jagged array' issue, but webkit's implementation treats it as follows: #parent{-webkit-transition-property: opacity, width;} #child{-webkit-transition-property:inherit;-webkit-transition-duration:1s;} will result in two transitions ( opacity 1s, and width 1s). In other words, the number of values inherited from the parent is used in determining the total number of transitions. | ** That spec doesn't really address how to handle values of 'inherit' in combination with the 'jagged array' issue, but webkit's implementation treats it as follows: <code>#parent{-webkit-transition-property: opacity, width;}</code> <code>#child{-webkit-transition-property:inherit;-webkit-transition-duration:1s;}</code> will result in <code>#child</code> having two transitions (opacity 1s, and width 1s). In other words, the number of values inherited from the parent is used in determining the total number of transitions. | ||
* If an element's -webkit-transition-* properties are changed (e.g. by dynamically changing the 'class' attribute such that a new set of style rules apply to it), the new style should be used to determine which properties should have active transitions (previous versions of webkit actually used the old style, but at some point the behavior was switched to use the new style's transition definitions) | * If an element's -webkit-transition-* properties are changed (e.g. by dynamically changing the 'class' attribute such that a new set of style rules apply to it), the new style should be used to determine which properties should have active transitions (previous versions of webkit actually used the old style, but at some point the behavior was switched to use the new style's transition definitions) | ||
* webkit does not support any shorthand properties for -webkit-transition-property | |||
* When animating to or from 'auto' (e.g. for the 'width' property), webkit animates, but treats 'auto' as 0 (in other words, if you don't have a transition active for width, it would end up at a different value than if a transition ''is'' active for width. This is clearly a bug). When changing the property to a percentage (e.g. width:50%), webkit does not animate at all, it just updates the value immediately to the new value. | |||
== Comparison with SMIL animations == | == Comparison with SMIL animations == | ||