Skip to content

Latest commit

 

History

History
61 lines (46 loc) · 2.05 KB

README.md

File metadata and controls

61 lines (46 loc) · 2.05 KB
Raw

HTML Timeline

Keyframe animation timeline for HTML.

Usage

<object id="example" type="image/svg+xml" data="some.svg"></object>

<timeline repeatCount="2" end="300">
    <timeline-track object="#example" target=".shape">

      <keyframe pos="0">
        <keyframe-value type="css" name="display" value="block"></keyframe-value>
      </keyframe>

      <keyframe pos="150">
        <keyframe-value type="css" name="display" value="none"></keyframe-value>
      </keyframe>

      <keyframe pos="300">
        <keyframe-value type="css" name="display" value="block"></keyframe-value>
      </keyframe>

    </timeline-track>
  </timeline>

References

<timeline> tag

Attribute Description Values Default
repeatCount How many times the timeline will loop indefinite, Number indefinite
length Length of the timeline Number -
state State of the timeline playing, stopped -

<timeline-track> tag

Attribute Description Values Default
object Targeted object tag Selector -
target Targeted element Selector -

<keyframe> tag

Attribute Description Values Default
pos Position of the keyframe on the timeline Number -

<keyframe-value>> tag

Attribute Description Values Default
type Type of the affected value css, attribute attribute
name Name of the affected value String -
value Value of the affected value Any -

Development

$ npm i
$ npm run dev