Skip to content

Add CSS Animation support #22

@tenphi

Description

@tenphi

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.

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions