Keyframes are a way to create animations using purely CSS. They are easy to
use and are a great way for a web developer to design some simple animations.
W3Schools Keyframes Tutorial
W3.org CSS Animations
Keyframe animations generally run once upon the rendering of an html object.
This framework allows you to easily create custom Keyframe animations that
can be run repeatedly. Keyframes also require hard-coding all parameters into
the stylesheet before runtime. This framework allows animations to be updated
with new html input parameters at any time.
Currently, this framework provides four custom-made animation classes for html pages to use: Sliders, Color Changers, Transformers, and Advanced Sliders.
The framework is written in such a way that it would be easy to expand and add more custom animation classes in the future.
This is great. You just need to define a keyframes rule in the CSS and reference the rule name in the CSS for the div or class you want to animate. But as you can see, it only runs once. What if you wanted to trigger the animation on an event like a button click?
Keyframes usually run once upon element rendering. In order to restart an animation, a trick I found on CSS-Tricks.com is to clone the element, delete the old one and render the new one. The animation will fire upon rendering of the new animation.
In order to read in user input from HTML input elements, the framework updates all of the component object's fields each time the animation runs.
Link to framework zip file
A page uses this framework by creating a div in their html code. Make sure you have included a reference to the animationFramework.js code in a script tag, and created a framework object in the html file. Then, pass the id of the div and any necessary parameters to the component constructor method function in the framework code.
An element id is required for each make function. Other parameters, such as duration, will be set to default values by the framework if not specified by the client when calling the constructor function.
The other thing the HTML page has to do is let the framework know when an event has occurred, such as a button click, so that the framework knows when to restart the animation. This can be done by adding code inside a jQuery document.ready() function that listens for a button click and then calls the framework's restartAnimation() function.