CSS Animations - Dynamic Creation

Dynamically created animations, applied to element and removed upon completion.

by Harisankaran Parameswaran

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='to-animate'></div>
<pre class='output'></pre>

CSS

.to-animate {
  height: 100px;
  width: 100px;
  margin: 10px;
  border: 1px solid red;
}

JavaScript

var elm = document.querySelector('.to-animate');
var op = document.querySelector('.output');

var animName = "shake-up-down",
  animDuration = "3s",
  animTiming = "linear",
  animFillMode = "forwards",
  animIteration = "3";

var animationEvents = {
  "-webkit-keyframes": {
    "start": "webkitAnimationStart",
    "end": "webkitAnimationEnd"
  },
  "keyframes": {
    "start": "animationstart",
    "end": "animationend"
  },
  "-moz-keyframes": {
    "start": "animationstart",
    "end": "animationend"
  },
  "-ms-keyframes": {
    "start": "animationstart",
    "end": "animationend"
  }
};

var animationStart = animationEvents[PrefixFree.prefixProperty("keyframes")]["start"];
var animationEnd = animationEvents[PrefixFree.prefixProperty("keyframes")]["end"];

var ruleText = "0% {transform: translateY(0px);}";
ruleText += "25% {transform: translateY(10px);}";
ruleText += "75% {transform: translateY(-10px);}";
ruleText += "100% {transform: translateY(0px);}";

ruleText = PrefixFree.prefixCSS(ruleText);

/* From David Walsh's blog - Coding for prefixes done by self using Prefix-free library */
function addCSSAnimRule(sheet, name, rules, index) {
  if ("insertRule" in sheet) {
    sheet.insertRule("@" + PrefixFree.prefixProperty("keyframes") + " " + name + "{" + rules + "}", index);
  } else if ("addRule" in sheet) {
    sheet.addRule("@" + PrefixFree.prefixProperty("keyframes") + " " + name, rules, index);
  }
}

/* Self written */
function applyAnimation(elm, name, duration, timing, iteration, fillmode) {
  elm.style[PrefixFree.prefixProperty("animation")] = name + " " + duration + " " + timing + " " + iteration + " " + fillmode;
  elm.style["animation"] = name + " " + duration + " " + timing + " " + iteration + " " + fillmode;

  /* or if you want to set them individually, comment the above line and uncomment this
  elm.style[PrefixFree.prefixProperty("animation-name")] = name;
  elm.style[PrefixFree.prefixProperty("animation-duration")] = duration;
 ...