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

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions