Custom CSS KeyFrame Animation Framework

By Colin Barnes


What are CSS Keyframes?

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 CSS Animations

What can this framework do for me?

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.

Here is a simple example of a CSS Keyframe animation

See the Pen dvJQRx by Colin Barnes (@cbarnes) on CodePen.

Restarting CSS Keyframe Animations

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 is to clone the element, delete the old one and render the new one. The animation will fire upon rendering of the new animation.

See the Pen MprzxP by Colin Barnes (@cbarnes) on CodePen.

Adding CSS Keyframe Rules with JavaScript

Keyframes are just CSS rules. In order to generate them dynamically with Javascript, the framework appends a string containing the keyframe rule to the head element using jQuery.

See the Pen xqpmEG by Colin Barnes (@cbarnes) on CodePen.

Getting User Input

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.

See the Pen NpzQrx by Colin Barnes (@cbarnes) on CodePen.

Four custom classes provided by the framework

The Slider

Left Starting Position: Left Ending Position: Duration (s):

The Color Changer

Starting Color: Ending Color: Duration (s):

The Transformer

Starting Color: Middle Color: Ending Color: Duration (s): Starting Border Radius : Ending Border Radius : Starting Scale: Ending Scale :

Advanced Slider

Starting Color: Ending Color: Duration (s): Left Start Position: Left End Position:

How to use this framework / Overview

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.

See the Pen constructor call by Colin Barnes (@cbarnes) on CodePen.

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.

See the Pen restart animation caller by Colin Barnes (@cbarnes) on CodePen.


In conclusion, writing this framework and tutorial was a great way for me to learn about animating elements with CSS Keyframes. I also got to practice writing a small JavaScript framework and thinking about how responsibilities should be divided up between the client HTML page and the JavaScript Framework. I hope that this tutorial has been helpful and encourage you to try this framework if you want to easily customize and restart your CSS animations.