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

✨ New package @master/animate.css #219

Open
1aron opened this issue May 22, 2023 · 0 comments
Open

✨ New package @master/animate.css #219

1aron opened this issue May 22, 2023 · 0 comments
Labels
feature New feature
Milestone
2.X

Comments

@1aron
Copy link
Member

1aron commented May 22, 2023 •
edited

Description

https://animate.style is a welcome CSS animation library that can be used on demand if we provide it with a Master CSS configuration.

export default {
    animations: {
        'slide-in-up': {
            from: { transform: 'translate3d(0, 100%, 0)' },
            to: { transform: 'translate3d(0, 0, 0)' }
        },
        ...
    }
}

Before we provide the package, you can of course import the pure CSS version first:

<html>
<head>
    <script src="https://cdn.master.co/css@beta"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    ...
</head>
<body>
    <div class="@slide-in-up|.5s">slideInUp</div>
</body>
</html>

That's the magic of it.

Using csso and css-tree
@1aron 1aron added the feature New feature label May 22, 2023
@1aron 1aron added this to the Master CSS 2.X milestone May 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature New feature
Projects
None yet
Milestone
2.X
Development

No branches or pull requests
1 participant
@1aron