Confirmed users
490
edits
SMIL:CSS Animation: Difference between revisions
Jump to navigation
Jump to search
→Animating CSS Style
| Line 9: | Line 9: | ||
=== Animating CSS Style === | === Animating CSS Style === | ||
As suggested in the [http://www.w3.org/TR/smil-animation/#AnimationSandwichModel documentation on the "SMIL Sandwich Model"] in the smil-animation spec, I'm proposing that we use an implementation backed by <code>getOverrideStyle()</code>. | As suggested in the [http://www.w3.org/TR/smil-animation/#AnimationSandwichModel documentation on the "SMIL Sandwich Model"] in the smil-animation spec, I'm proposing that we use an implementation backed by <code>getOverrideStyle()</code>. | ||
Here's an overview of the steps required to animate a specific CSS property on a specific element, using <code>getOverrideStyle()</code>, during a SMIL animation sample: | |||
# Call <code>getOverrideStyle()</code> on the element, and from this, remove any settings for the CSS property in question. (This ensures that <code>getComputedStyle()</code> won't reflect any animation effects, so it can be used as a 'base value' for animation in the next step) | |||
# Perform SMIL interpolation & compositing for the CSS property, using <code>getComputedStyle()</code> as the base value. | |||
# Store the final composited value of the property in <code>getOverrideStyle()</code>. | |||
=== Implementing <code>getOverrideStyle()</code> === | === Implementing <code>getOverrideStyle()</code> === | ||