JSFiddle - React, Tailwind, and code Playground

by Jake Cattrall

HTML

<script src="https://rawgithub.com/jQueryKeyframes/jQuery.Keyframes/master/jquery.keyframes.min.js"></script>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="result"></div>

CSS

.box1 {
    display: inline-block;
    background-color: #555;
    width: 50px;
    height: 50px;
    border: 1px solid black;
}

JavaScript

var animationCount = 0;
var targetElements = $('.box1');

var shake_start = {'transform': 'translate(0px)'};
var shake_odd1 = {'transform': 'translate(-10px, -10px)'};
var shake_even1 = {'transform': 'translate(10px, 10px)'};
var shake_odd2 = {'transform': 'translate(10px, -10px)'};
var shake_even2 = {'transform': 'translate(-10px, 10px)'};

$.keyframe.define([{
    name: 'crazy',
    '0%': shake_start,
    '10%': shake_odd2,
    '20%': shake_even1,
    '30%': shake_odd2,
    '40%': shake_even2,
    '50%': shake_odd2,
    '60%': shake_even1,
    '70%': shake_odd1,
    '80%': shake_even2,
    '90%': shake_odd1
    }
]);

function iterateCheck() {
    animationCount++;
    if (animationCount == targetElements.length) {
        $('.result').append("Animated "+animationCount+" Elements!");
    }
}

targetElements.playKeyframe(
    'crazy 1000 linear 0 1 normal forwards',
iterateCheck);