outpostHQ/numl

Add CSS Animation support

Opened this issue · 0 comments

Proposed syntax:

<nu-block>
  <nu-animation name="rotation" duration="1s" easing="linear">
    <nu-stop transform="rotate(0deg)"></nu-stop>
    <nu-stop transform="rotate(360deg)"></nu-stop>
  </nu-animation>

  <nu-icon name="rotate" animation="rotation"></nu-icon>
</nu-block>

The main goal is to eliminate redundant percentage notation and replace it with more fluid duration alternative:

Main syntax:

<nu-stop duration=".5s" ...></nu-stop>

Part syntax:

<nu-stop duration="1p" ...></nu-stop>

Frame syntax:

<nu-stop duration="5fr" ...></nu-stop>

Exact stops will be calculated automatically.