Add DOM Style version of animate.css

[zakarialaoui10]

Idea :

Since March 2020, the Element class, which serves as the base class for all HTMLElement, SVGElement, and MathMLElement instances, has incorporated a feature known as animate.

The animate method in the Element class provides a way to create animations directly on DOM elements using the Web Animations API. This method allows you to animate CSS properties or other attributes of an element over a specified duration.

As I am developing a JavaScript library named ziko.js, which utilizes DOM nodes to create and manipulate user interfaces, I have also adopted this .animate() feature. While working on built-in animations for the library, I discovered your library and decided to aimplemnt its JavaScript.

So all libraries that use this hyperscript approach can use it as well as the dom element .

Usage :

• With Dom node :

 let element = document.querySelector(/* selector */);
 let {keyframes, config} = bounce(1000, 2, "ease");
 element.animate(keyframes, config)

• With zikojs :

 import {text} from "ziko"
 import {bounce} from "animate.css/js"
 let txt= text("Hello from zikojs").style({
    color : "darkblue"
 });
 let {keyframes, config} = bounce(1000, 2, "ease")
 txt.animate(keyframes, config)

[zakarialaoui10]

@daneden
@eltonmesquita

[daneden]

Hey @zakarialaoui10, thanks for submitting this PR! This is a cool idea, but I think it would make a lot more sense as a separate repository/library and not part of the main animate.css library.

[zakarialaoui10]

Hey @daneden,

Thank you for your feedback and for taking the time to review my PR
To be transparent, I had already created a separate repository for this concept ziko-keyframes, but I hesitated to publish the package independently due to concerns about potential copyright issues with animate.css. I wanted to ensure that my work aligns with the principles and values of the animate.css community, which is why I submitted it as a PR to the main repository.

Now that you've clarified that this would be better as a standalone library, I'm more confident about proceeding with its release while giving full credit to animate.css as the foundation for this idea.

If you have any further advice on licensing, attribution, or any specific content you'd like to see included in the README file—such as a header or footer acknowledging animate.css—I’d be more than happy to incorporate it before moving forward.

Note

This project is a bridge between the Animate.css and Ziko.js ecosystems, combining the strengths of both to provide a seamless animation experience.
The Repository : ziko-keyframes