Timeline (CSS Property)

From PowerUI
Jump to: navigation, search

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;
}