Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add CSS Animation support #22

Open
tenphi opened this issue Dec 24, 2019 · 0 comments
Open

Add CSS Animation support #22

tenphi opened this issue Dec 24, 2019 · 0 comments
Assignees
@tenphi
Labels
enhancement New feature or request
Projects
Numl v1

Comments

@tenphi
Copy link
Collaborator

tenphi commented Dec 24, 2019

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.
@tenphi tenphi added the enhancement New feature or request label Dec 24, 2019
@tenphi tenphi added this to the v0.9 milestone Dec 24, 2019
@tenphi tenphi self-assigned this Dec 24, 2019
@tenphi tenphi added this to To do in Numl v1 via automation Dec 24, 2019
@tenphi tenphi modified the milestones: v0.9, v0.10 Jan 5, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tenphi tenphi

Labels
enhancement New feature or request
Projects
Numl v1
  
To do
Milestone
No milestone
Development

No branches or pull requests
1 participant
@tenphi