Difference between revisions of "Timeline (CSS Property)"
From PowerUI
(Created page with "The timeline CSS property is used by PowerSlide to run a timeline on an element. It's structured the same as the [https://developer.mozilla.org/en-US/docs/Web/CSS/animatio...") |
|||
| Line 1: | Line 1: | ||
| − | The timeline CSS property is used by [[PowerSlide]] to run a timeline on an element. It's structured the same as the [https://developer.mozilla.org/en-US/docs/Web/CSS/animation standard animation CSS property] (which is also supported by PowerUI, but does something very different!): | + | The timeline CSS property is used by [[PowerSlide]] as one of two main ways to run a timeline on an element. It's structured the same as the [https://developer.mozilla.org/en-US/docs/Web/CSS/animation standard animation CSS property] (which is also supported by PowerUI, but does something very different!): |
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
Latest revision as of 03:48, 21 March 2017
The timeline CSS property is used by PowerSlide as one of two main ways to run a timeline on an element. It's structured the same as the standard animation CSS property (which is also supported by PowerUI, but does something very different!):
timeline: <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || [ none | <url> ]Like animation, timeline is a composite of all of these:
timeline-name: <url> | none
timeline-duration: <time>
timeline-direction: <single-animation-direction>
timeline-delay: <time>
timeline-iteration-count: <single-animation-iteration-count>
timeline-timing-function: <single-timing-function>The main difference is timeline-name must be a url.
| Inherited? | Initial value |
|---|---|
| No | none |
.test{
timeline: url(myPowerSlide.json) 3s;
}