@pod-os/elements 0.0.1

package/dist/esm/animation-23699cc5.js

@@ -0,0 +1,955 @@
+import { r as raf } from './helpers-dffac6f7.js';
+
+let animationPrefix;
+/**
+ * Web Animations requires hyphenated CSS properties
+ * to be written in camelCase when animating
+ */
+const processKeyframes = (keyframes) => {
+  keyframes.forEach(keyframe => {
+    for (const key in keyframe) {
+      if (keyframe.hasOwnProperty(key)) {
+        const value = keyframe[key];
+        if (key === 'easing') {
+          const newKey = 'animation-timing-function';
+          keyframe[newKey] = value;
+          delete keyframe[key];
+        }
+        else {
+          const newKey = convertCamelCaseToHypen(key);
+          if (newKey !== key) {
+            keyframe[newKey] = value;
+            delete keyframe[key];
+          }
+        }
+      }
+    }
+  });
+  return keyframes;
+};
+const convertCamelCaseToHypen = (str) => {
+  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+};
+const getAnimationPrefix = (el) => {
+  if (animationPrefix === undefined) {
+    const supportsUnprefixed = el.style.animationName !== undefined;
+    const supportsWebkitPrefix = el.style.webkitAnimationName !== undefined;
+    animationPrefix = (!supportsUnprefixed && supportsWebkitPrefix) ? '-webkit-' : '';
+  }
+  return animationPrefix;
+};
+const setStyleProperty = (element, propertyName, value) => {
+  const prefix = propertyName.startsWith('animation') ? getAnimationPrefix(element) : '';
+  element.style.setProperty(prefix + propertyName, value);
+};
+const removeStyleProperty = (element, propertyName) => {
+  const prefix = propertyName.startsWith('animation') ? getAnimationPrefix(element) : '';
+  element.style.removeProperty(prefix + propertyName);
+};
+const animationEnd = (el, callback) => {
+  let unRegTrans;
+  const opts = { passive: true };
+  const unregister = () => {
+    if (unRegTrans) {
+      unRegTrans();
+    }
+  };
+  const onTransitionEnd = (ev) => {
+    if (el === ev.target) {
+      unregister();
+      callback(ev);
+    }
+  };
+  if (el) {
+    el.addEventListener('webkitAnimationEnd', onTransitionEnd, opts);
+    el.addEventListener('animationend', onTransitionEnd, opts);
+    unRegTrans = () => {
+      el.removeEventListener('webkitAnimationEnd', onTransitionEnd, opts);
+      el.removeEventListener('animationend', onTransitionEnd, opts);
+    };
+  }
+  return unregister;
+};
+const generateKeyframeRules = (keyframes = []) => {
+  return keyframes.map(keyframe => {
+    const offset = keyframe.offset;
+    const frameString = [];
+    for (const property in keyframe) {
+      if (keyframe.hasOwnProperty(property) && property !== 'offset') {
+        frameString.push(`${property}: ${keyframe[property]};`);
+      }
+    }
+    return `${offset * 100}% { ${frameString.join(' ')} }`;
+  }).join(' ');
+};
+const keyframeIds = [];
+const generateKeyframeName = (keyframeRules) => {
+  let index = keyframeIds.indexOf(keyframeRules);
+  if (index < 0) {
+    index = (keyframeIds.push(keyframeRules) - 1);
+  }
+  return `ion-animation-${index}`;
+};
+const getStyleContainer = (element) => {
+  const rootNode = element.getRootNode();
+  return (rootNode.head || rootNode);
+};
+const createKeyframeStylesheet = (keyframeName, keyframeRules, element) => {
+  const styleContainer = getStyleContainer(element);
+  const keyframePrefix = getAnimationPrefix(element);
+  const existingStylesheet = styleContainer.querySelector('#' + keyframeName);
+  if (existingStylesheet) {
+    return existingStylesheet;
+  }
+  const stylesheet = (element.ownerDocument || document).createElement('style');
+  stylesheet.id = keyframeName;
+  stylesheet.textContent = `@${keyframePrefix}keyframes ${keyframeName} { ${keyframeRules} } @${keyframePrefix}keyframes ${keyframeName}-alt { ${keyframeRules} }`;
+  styleContainer.appendChild(stylesheet);
+  return stylesheet;
+};
+const addClassToArray = (classes = [], className) => {
+  if (className !== undefined) {
+    const classNameToAppend = (Array.isArray(className)) ? className : [className];
+    return [...classes, ...classNameToAppend];
+  }
+  return classes;
+};
+
+const createAnimation = (animationId) => {
+  let _delay;
+  let _duration;
+  let _easing;
+  let _iterations;
+  let _fill;
+  let _direction;
+  let _keyframes = [];
+  let beforeAddClasses = [];
+  let beforeRemoveClasses = [];
+  let initialized = false;
+  let parentAnimation;
+  let beforeStylesValue = {};
+  let afterAddClasses = [];
+  let afterRemoveClasses = [];
+  let afterStylesValue = {};
+  let numAnimationsRunning = 0;
+  let shouldForceLinearEasing = false;
+  let shouldForceSyncPlayback = false;
+  let cssAnimationsTimerFallback;
+  let forceDirectionValue;
+  let forceDurationValue;
+  let forceDelayValue;
+  let willComplete = true;
+  let finished = false;
+  let shouldCalculateNumAnimations = true;
+  let keyframeName;
+  let ani;
+  const id = animationId;
+  const onFinishCallbacks = [];
+  const onFinishOneTimeCallbacks = [];
+  const elements = [];
+  const childAnimations = [];
+  const stylesheets = [];
+  const _beforeAddReadFunctions = [];
+  const _beforeAddWriteFunctions = [];
+  const _afterAddReadFunctions = [];
+  const _afterAddWriteFunctions = [];
+  const webAnimations = [];
+  const supportsAnimationEffect = (typeof AnimationEffect === 'function' || typeof window.AnimationEffect === 'function');
+  const supportsWebAnimations = (typeof Element === 'function') && (typeof Element.prototype.animate === 'function') && supportsAnimationEffect;
+  const ANIMATION_END_FALLBACK_PADDING_MS = 100;
+  const getWebAnimations = () => {
+    return webAnimations;
+  };
+  const destroy = (clearStyleSheets) => {
+    childAnimations.forEach(childAnimation => {
+      childAnimation.destroy(clearStyleSheets);
+    });
+    cleanUp(clearStyleSheets);
+    elements.length = 0;
+    childAnimations.length = 0;
+    _keyframes.length = 0;
+    clearOnFinish();
+    initialized = false;
+    shouldCalculateNumAnimations = true;
+    return ani;
+  };
+  /**
+   * Cancels any Web Animations, removes
+   * any animation properties from the
+   * animation's elements, and removes the
+   * animation's stylesheets from the DOM.
+   */
+  const cleanUp = (clearStyleSheets) => {
+    cleanUpElements();
+    if (clearStyleSheets) {
+      cleanUpStyleSheets();
+    }
+  };
+  const resetFlags = () => {
+    shouldForceLinearEasing = false;
+    shouldForceSyncPlayback = false;
+    shouldCalculateNumAnimations = true;
+    forceDirectionValue = undefined;
+    forceDurationValue = undefined;
+    forceDelayValue = undefined;
+    numAnimationsRunning = 0;
+    finished = false;
+    willComplete = true;
+  };
+  const onFinish = (callback, opts) => {
+    const callbacks = (opts && opts.oneTimeCallback) ? onFinishOneTimeCallbacks : onFinishCallbacks;
+    callbacks.push({ c: callback, o: opts });
+    return ani;
+  };
+  const clearOnFinish = () => {
+    onFinishCallbacks.length = 0;
+    onFinishOneTimeCallbacks.length = 0;
+    return ani;
+  };
+  /**
+   * Cancels any Web Animations and removes
+   * any animation properties from the
+   * the animation's elements.
+   */
+  const cleanUpElements = () => {
+    if (supportsWebAnimations) {
+      webAnimations.forEach(animation => {
+        animation.cancel();
+      });
+      webAnimations.length = 0;
+    }
+    else {
+      const elementsArray = elements.slice();
+      raf(() => {
+        elementsArray.forEach(element => {
+          removeStyleProperty(element, 'animation-name');
+          removeStyleProperty(element, 'animation-duration');
+          removeStyleProperty(element, 'animation-timing-function');
+          removeStyleProperty(element, 'animation-iteration-count');
+          removeStyleProperty(element, 'animation-delay');
+          removeStyleProperty(element, 'animation-play-state');
+          removeStyleProperty(element, 'animation-fill-mode');
+          removeStyleProperty(element, 'animation-direction');
+        });
+      });
+    }
+  };
+  /**
+   * Removes the animation's stylesheets
+   * from the DOM.
+   */
+  const cleanUpStyleSheets = () => {
+    stylesheets.forEach(stylesheet => {
+      /**
+       * When sharing stylesheets, it's possible
+       * for another animation to have already
+       * cleaned up a particular stylesheet
+       */
+      if (stylesheet && stylesheet.parentNode) {
+        stylesheet.parentNode.removeChild(stylesheet);
+      }
+    });
+    stylesheets.length = 0;
+  };
+  const beforeAddRead = (readFn) => {
+    _beforeAddReadFunctions.push(readFn);
+    return ani;
+  };
+  const beforeAddWrite = (writeFn) => {
+    _beforeAddWriteFunctions.push(writeFn);
+    return ani;
+  };
+  const afterAddRead = (readFn) => {
+    _afterAddReadFunctions.push(readFn);
+    return ani;
+  };
+  const afterAddWrite = (writeFn) => {
+    _afterAddWriteFunctions.push(writeFn);
+    return ani;
+  };
+  const beforeAddClass = (className) => {
+    beforeAddClasses = addClassToArray(beforeAddClasses, className);
+    return ani;
+  };
+  const beforeRemoveClass = (className) => {
+    beforeRemoveClasses = addClassToArray(beforeRemoveClasses, className);
+    return ani;
+  };
+  /**
+   * Set CSS inline styles to the animation's
+   * elements before the animation begins.
+   */
+  const beforeStyles = (styles = {}) => {
+    beforeStylesValue = styles;
+    return ani;
+  };
+  /**
+   * Clear CSS inline styles from the animation's
+   * elements before the animation begins.
+   */
+  const beforeClearStyles = (propertyNames = []) => {
+    for (const property of propertyNames) {
+      beforeStylesValue[property] = '';
+    }
+    return ani;
+  };
+  const afterAddClass = (className) => {
+    afterAddClasses = addClassToArray(afterAddClasses, className);
+    return ani;
+  };
+  const afterRemoveClass = (className) => {
+    afterRemoveClasses = addClassToArray(afterRemoveClasses, className);
+    return ani;
+  };
+  const afterStyles = (styles = {}) => {
+    afterStylesValue = styles;
+    return ani;
+  };
+  const afterClearStyles = (propertyNames = []) => {
+    for (const property of propertyNames) {
+      afterStylesValue[property] = '';
+    }
+    return ani;
+  };
+  const getFill = () => {
+    if (_fill !== undefined) {
+      return _fill;
+    }
+    if (parentAnimation) {
+      return parentAnimation.getFill();
+    }
+    return 'both';
+  };
+  const getDirection = () => {
+    if (forceDirectionValue !== undefined) {
+      return forceDirectionValue;
+    }
+    if (_direction !== undefined) {
+      return _direction;
+    }
+    if (parentAnimation) {
+      return parentAnimation.getDirection();
+    }
+    return 'normal';
+  };
+  const getEasing = () => {
+    if (shouldForceLinearEasing) {
+      return 'linear';
+    }
+    if (_easing !== undefined) {
+      return _easing;
+    }
+    if (parentAnimation) {
+      return parentAnimation.getEasing();
+    }
+    return 'linear';
+  };
+  const getDuration = () => {
+    if (shouldForceSyncPlayback) {
+      return 0;
+    }
+    if (forceDurationValue !== undefined) {
+      return forceDurationValue;
+    }
+    if (_duration !== undefined) {
+      return _duration;
+    }
+    if (parentAnimation) {
+      return parentAnimation.getDuration();
+    }
+    return 0;
+  };
+  const getIterations = () => {
+    if (_iterations !== undefined) {
+      return _iterations;
+    }
+    if (parentAnimation) {
+      return parentAnimation.getIterations();
+    }
+    return 1;
+  };
+  const getDelay = () => {
+    if (forceDelayValue !== undefined) {
+      return forceDelayValue;
+    }
+    if (_delay !== undefined) {
+      return _delay;
+    }
+    if (parentAnimation) {
+      return parentAnimation.getDelay();
+    }
+    return 0;
+  };
+  const getKeyframes = () => {
+    return _keyframes;
+  };
+  const direction = (animationDirection) => {
+    _direction = animationDirection;
+    update(true);
+    return ani;
+  };
+  const fill = (animationFill) => {
+    _fill = animationFill;
+    update(true);
+    return ani;
+  };
+  const delay = (animationDelay) => {
+    _delay = animationDelay;
+    update(true);
+    return ani;
+  };
+  const easing = (animationEasing) => {
+    _easing = animationEasing;
+    update(true);
+    return ani;
+  };
+  const duration = (animationDuration) => {
+    /**
+     * CSS Animation Durations of 0ms work fine on Chrome
+     * but do not run on Safari, so force it to 1ms to
+     * get it to run on both platforms.
+     */
+    if (!supportsWebAnimations && animationDuration === 0) {
+      animationDuration = 1;
+    }
+    _duration = animationDuration;
+    update(true);
+    return ani;
+  };
+  const iterations = (animationIterations) => {
+    _iterations = animationIterations;
+    update(true);
+    return ani;
+  };
+  const parent = (animation) => {
+    parentAnimation = animation;
+    return ani;
+  };
+  const addElement = (el) => {
+    if (el != null) {
+      if (el.nodeType === 1) {
+        elements.push(el);
+      }
+      else if (el.length >= 0) {
+        for (let i = 0; i < el.length; i++) {
+          elements.push(el[i]);
+        }
+      }
+      else {
+        console.error('Invalid addElement value');
+      }
+    }
+    return ani;
+  };
+  const addAnimation = (animationToAdd) => {
+    if (animationToAdd != null) {
+      if (Array.isArray(animationToAdd)) {
+        for (const animation of animationToAdd) {
+          animation.parent(ani);
+          childAnimations.push(animation);
+        }
+      }
+      else {
+        animationToAdd.parent(ani);
+        childAnimations.push(animationToAdd);
+      }
+    }
+    return ani;
+  };
+  const keyframes = (keyframeValues) => {
+    _keyframes = keyframeValues;
+    return ani;
+  };
+  /**
+   * Run all "before" animation hooks.
+   */
+  const beforeAnimation = () => {
+    // Runs all before read callbacks
+    _beforeAddReadFunctions.forEach(callback => callback());
+    // Runs all before write callbacks
+    _beforeAddWriteFunctions.forEach(callback => callback());
+    // Updates styles and classes before animation runs
+    const addClasses = beforeAddClasses;
+    const removeClasses = beforeRemoveClasses;
+    const styles = beforeStylesValue;
+    elements.forEach(el => {
+      const elementClassList = el.classList;
+      addClasses.forEach(c => elementClassList.add(c));
+      removeClasses.forEach(c => elementClassList.remove(c));
+      for (const property in styles) {
+        if (styles.hasOwnProperty(property)) {
+          setStyleProperty(el, property, styles[property]);
+        }
+      }
+    });
+  };
+  /**
+   * Run all "after" animation hooks.
+   */
+  const afterAnimation = () => {
+    clearCSSAnimationsTimeout();
+    // Runs all after read callbacks
+    _afterAddReadFunctions.forEach(callback => callback());
+    // Runs all after write callbacks
+    _afterAddWriteFunctions.forEach(callback => callback());
+    // Updates styles and classes before animation ends
+    const currentStep = willComplete ? 1 : 0;
+    const addClasses = afterAddClasses;
+    const removeClasses = afterRemoveClasses;
+    const styles = afterStylesValue;
+    elements.forEach(el => {
+      const elementClassList = el.classList;
+      addClasses.forEach(c => elementClassList.add(c));
+      removeClasses.forEach(c => elementClassList.remove(c));
+      for (const property in styles) {
+        if (styles.hasOwnProperty(property)) {
+          setStyleProperty(el, property, styles[property]);
+        }
+      }
+    });
+    onFinishCallbacks.forEach(onFinishCallback => {
+      return onFinishCallback.c(currentStep, ani);
+    });
+    onFinishOneTimeCallbacks.forEach(onFinishCallback => {
+      return onFinishCallback.c(currentStep, ani);
+    });
+    onFinishOneTimeCallbacks.length = 0;
+    shouldCalculateNumAnimations = true;
+    if (willComplete) {
+      finished = true;
+    }
+    willComplete = true;
+  };
+  const animationFinish = () => {
+    if (numAnimationsRunning === 0) {
+      return;
+    }
+    numAnimationsRunning--;
+    if (numAnimationsRunning === 0) {
+      afterAnimation();
+      if (parentAnimation) {
+        parentAnimation.animationFinish();
+      }
+    }
+  };
+  const initializeCSSAnimation = (toggleAnimationName = true) => {
+    cleanUpStyleSheets();
+    const processedKeyframes = processKeyframes(_keyframes);
+    elements.forEach(element => {
+      if (processedKeyframes.length > 0) {
+        const keyframeRules = generateKeyframeRules(processedKeyframes);
+        keyframeName = (animationId !== undefined) ? animationId : generateKeyframeName(keyframeRules);
+        const stylesheet = createKeyframeStylesheet(keyframeName, keyframeRules, element);
+        stylesheets.push(stylesheet);
+        setStyleProperty(element, 'animation-duration', `${getDuration()}ms`);
+        setStyleProperty(element, 'animation-timing-function', getEasing());
+        setStyleProperty(element, 'animation-delay', `${getDelay()}ms`);
+        setStyleProperty(element, 'animation-fill-mode', getFill());
+        setStyleProperty(element, 'animation-direction', getDirection());
+        const iterationsCount = (getIterations() === Infinity)
+          ? 'infinite'
+          : getIterations().toString();
+        setStyleProperty(element, 'animation-iteration-count', iterationsCount);
+        setStyleProperty(element, 'animation-play-state', 'paused');
+        if (toggleAnimationName) {
+          setStyleProperty(element, 'animation-name', `${stylesheet.id}-alt`);
+        }
+        raf(() => {
+          setStyleProperty(element, 'animation-name', stylesheet.id || null);
+        });
+      }
+    });
+  };
+  const initializeWebAnimation = () => {
+    elements.forEach(element => {
+      const animation = element.animate(_keyframes, {
+        id,
+        delay: getDelay(),
+        duration: getDuration(),
+        easing: getEasing(),
+        iterations: getIterations(),
+        fill: getFill(),
+        direction: getDirection()
+      });
+      animation.pause();
+      webAnimations.push(animation);
+    });
+    if (webAnimations.length > 0) {
+      webAnimations[0].onfinish = () => {
+        animationFinish();
+      };
+    }
+  };
+  const initializeAnimation = (toggleAnimationName = true) => {
+    beforeAnimation();
+    if (_keyframes.length > 0) {
+      if (supportsWebAnimations) {
+        initializeWebAnimation();
+      }
+      else {
+        initializeCSSAnimation(toggleAnimationName);
+      }
+    }
+    initialized = true;
+  };
+  const setAnimationStep = (step) => {
+    step = Math.min(Math.max(step, 0), 0.9999);
+    if (supportsWebAnimations) {
+      webAnimations.forEach(animation => {
+        animation.currentTime = animation.effect.getComputedTiming().delay + (getDuration() * step);
+        animation.pause();
+      });
+    }
+    else {
+      const animationDuration = `-${getDuration() * step}ms`;
+      elements.forEach(element => {
+        if (_keyframes.length > 0) {
+          setStyleProperty(element, 'animation-delay', animationDuration);
+          setStyleProperty(element, 'animation-play-state', 'paused');
+        }
+      });
+    }
+  };
+  const updateWebAnimation = (step) => {
+    webAnimations.forEach(animation => {
+      animation.effect.updateTiming({
+        delay: getDelay(),
+        duration: getDuration(),
+        easing: getEasing(),
+        iterations: getIterations(),
+        fill: getFill(),
+        direction: getDirection()
+      });
+    });
+    if (step !== undefined) {
+      setAnimationStep(step);
+    }
+  };
+  const updateCSSAnimation = (toggleAnimationName = true, step) => {
+    raf(() => {
+      elements.forEach(element => {
+        setStyleProperty(element, 'animation-name', keyframeName || null);
+        setStyleProperty(element, 'animation-duration', `${getDuration()}ms`);
+        setStyleProperty(element, 'animation-timing-function', getEasing());
+        setStyleProperty(element, 'animation-delay', (step !== undefined) ? `-${step * getDuration()}ms` : `${getDelay()}ms`);
+        setStyleProperty(element, 'animation-fill-mode', getFill() || null);
+        setStyleProperty(element, 'animation-direction', getDirection() || null);
+        const iterationsCount = (getIterations() === Infinity)
+          ? 'infinite'
+          : getIterations().toString();
+        setStyleProperty(element, 'animation-iteration-count', iterationsCount);
+        if (toggleAnimationName) {
+          setStyleProperty(element, 'animation-name', `${keyframeName}-alt`);
+        }
+        raf(() => {
+          setStyleProperty(element, 'animation-name', keyframeName || null);
+        });
+      });
+    });
+  };
+  const update = (deep = false, toggleAnimationName = true, step) => {
+    if (deep) {
+      childAnimations.forEach(animation => {
+        animation.update(deep, toggleAnimationName, step);
+      });
+    }
+    if (supportsWebAnimations) {
+      updateWebAnimation(step);
+    }
+    else {
+      updateCSSAnimation(toggleAnimationName, step);
+    }
+    return ani;
+  };
+  const progressStart = (forceLinearEasing = false, step) => {
+    childAnimations.forEach(animation => {
+      animation.progressStart(forceLinearEasing, step);
+    });
+    pauseAnimation();
+    shouldForceLinearEasing = forceLinearEasing;
+    if (!initialized) {
+      initializeAnimation();
+    }
+    else {
+      update(false, true, step);
+    }
+    return ani;
+  };
+  const progressStep = (step) => {
+    childAnimations.forEach(animation => {
+      animation.progressStep(step);
+    });
+    setAnimationStep(step);
+    return ani;
+  };
+  const progressEnd = (playTo, step, dur) => {
+    shouldForceLinearEasing = false;
+    childAnimations.forEach(animation => {
+      animation.progressEnd(playTo, step, dur);
+    });
+    if (dur !== undefined) {
+      forceDurationValue = dur;
+    }
+    finished = false;
+    // tslint:disable-next-line: strict-boolean-conditions
+    willComplete = true;
+    if (playTo === 0) {
+      forceDirectionValue = (getDirection() === 'reverse') ? 'normal' : 'reverse';
+      if (forceDirectionValue === 'reverse') {
+        willComplete = false;
+      }
+      if (supportsWebAnimations) {
+        update();
+        setAnimationStep(1 - step);
+      }
+      else {
+        forceDelayValue = ((1 - step) * getDuration()) * -1;
+        update(false, false);
+      }
+    }
+    else if (playTo === 1) {
+      if (supportsWebAnimations) {
+        update();
+        setAnimationStep(step);
+      }
+      else {
+        forceDelayValue = (step * getDuration()) * -1;
+        update(false, false);
+      }
+    }
+    if (playTo !== undefined) {
+      onFinish(() => {
+        forceDurationValue = undefined;
+        forceDirectionValue = undefined;
+        forceDelayValue = undefined;
+      }, {
+        oneTimeCallback: true
+      });
+      if (!parentAnimation) {
+        play();
+      }
+    }
+    return ani;
+  };
+  const pauseAnimation = () => {
+    if (initialized) {
+      if (supportsWebAnimations) {
+        webAnimations.forEach(animation => {
+          animation.pause();
+        });
+      }
+      else {
+        elements.forEach(element => {
+          setStyleProperty(element, 'animation-play-state', 'paused');
+        });
+      }
+    }
+  };
+  const pause = () => {
+    childAnimations.forEach(animation => {
+      animation.pause();
+    });
+    pauseAnimation();
+    return ani;
+  };
+  const onAnimationEndFallback = () => {
+    cssAnimationsTimerFallback = undefined;
+    animationFinish();
+  };
+  const clearCSSAnimationsTimeout = () => {
+    if (cssAnimationsTimerFallback) {
+      clearTimeout(cssAnimationsTimerFallback);
+    }
+  };
+  const playCSSAnimations = () => {
+    clearCSSAnimationsTimeout();
+    raf(() => {
+      elements.forEach(element => {
+        if (_keyframes.length > 0) {
+          setStyleProperty(element, 'animation-play-state', 'running');
+        }
+      });
+    });
+    if (_keyframes.length === 0 || elements.length === 0) {
+      animationFinish();
+    }
+    else {
+      /**
+       * This is a catchall in the event that a CSS Animation did not finish.
+       * The Web Animations API has mechanisms in place for preventing this.
+       * CSS Animations will not fire an `animationend` event
+       * for elements with `display: none`. The Web Animations API
+       * accounts for this, but using raw CSS Animations requires
+       * this workaround.
+       */
+      const animationDelay = getDelay() || 0;
+      const animationDuration = getDuration() || 0;
+      const animationIterations = getIterations() || 1;
+      // No need to set a timeout when animation has infinite iterations
+      if (isFinite(animationIterations)) {
+        cssAnimationsTimerFallback = setTimeout(onAnimationEndFallback, animationDelay + (animationDuration * animationIterations) + ANIMATION_END_FALLBACK_PADDING_MS);
+      }
+      animationEnd(elements[0], () => {
+        clearCSSAnimationsTimeout();
+        /**
+         * Ensure that clean up
+         * is always done a frame
+         * before the onFinish handlers
+         * are fired. Otherwise, there
+         * may be flickering if a new
+         * animation is started on the same
+         * element too quickly
+         *
+         * TODO: Is there a cleaner way to do this?
+         */
+        raf(() => {
+          clearCSSAnimationPlayState();
+          raf(animationFinish);
+        });
+      });
+    }
+  };
+  const clearCSSAnimationPlayState = () => {
+    elements.forEach(element => {
+      removeStyleProperty(element, 'animation-duration');
+      removeStyleProperty(element, 'animation-delay');
+      removeStyleProperty(element, 'animation-play-state');
+    });
+  };
+  const playWebAnimations = () => {
+    webAnimations.forEach(animation => {
+      animation.play();
+    });
+    if (_keyframes.length === 0 || elements.length === 0) {
+      animationFinish();
+    }
+  };
+  const resetAnimation = () => {
+    if (supportsWebAnimations) {
+      setAnimationStep(0);
+      updateWebAnimation();
+    }
+    else {
+      updateCSSAnimation();
+    }
+  };
+  const play = (opts) => {
+    return new Promise(resolve => {
+      if (opts && opts.sync) {
+        shouldForceSyncPlayback = true;
+        onFinish(() => shouldForceSyncPlayback = false, { oneTimeCallback: true });
+      }
+      if (!initialized) {
+        initializeAnimation();
+      }
+      if (finished) {
+        resetAnimation();
+        finished = false;
+      }
+      if (shouldCalculateNumAnimations) {
+        numAnimationsRunning = childAnimations.length + 1;
+        shouldCalculateNumAnimations = false;
+      }
+      onFinish(() => resolve(), { oneTimeCallback: true });
+      childAnimations.forEach(animation => {
+        animation.play();
+      });
+      if (supportsWebAnimations) {
+        playWebAnimations();
+      }
+      else {
+        playCSSAnimations();
+      }
+    });
+  };
+  const stop = () => {
+    childAnimations.forEach(animation => {
+      animation.stop();
+    });
+    if (initialized) {
+      cleanUpElements();
+      initialized = false;
+    }
+    resetFlags();
+  };
+  const from = (property, value) => {
+    const firstFrame = _keyframes[0];
+    if (firstFrame !== undefined && (firstFrame.offset === undefined || firstFrame.offset === 0)) {
+      firstFrame[property] = value;
+    }
+    else {
+      _keyframes = [
+        { offset: 0, [property]: value },
+        ..._keyframes
+      ];
+    }
+    return ani;
+  };
+  const to = (property, value) => {
+    const lastFrame = _keyframes[_keyframes.length - 1];
+    if (lastFrame !== undefined && (lastFrame.offset === undefined || lastFrame.offset === 1)) {
+      lastFrame[property] = value;
+    }
+    else {
+      _keyframes = [
+        ..._keyframes,
+        { offset: 1, [property]: value }
+      ];
+    }
+    return ani;
+  };
+  const fromTo = (property, fromValue, toValue) => {
+    return from(property, fromValue).to(property, toValue);
+  };
+  return ani = {
+    parentAnimation,
+    elements,
+    childAnimations,
+    id,
+    animationFinish,
+    from,
+    to,
+    fromTo,
+    parent,
+    play,
+    pause,
+    stop,
+    destroy,
+    keyframes,
+    addAnimation,
+    addElement,
+    update,
+    fill,
+    direction,
+    iterations,
+    duration,
+    easing,
+    delay,
+    getWebAnimations,
+    getKeyframes,
+    getFill,
+    getDirection,
+    getDelay,
+    getIterations,
+    getEasing,
+    getDuration,
+    afterAddRead,
+    afterAddWrite,
+    afterClearStyles,
+    afterStyles,
+    afterRemoveClass,
+    afterAddClass,
+    beforeAddRead,
+    beforeAddWrite,
+    beforeClearStyles,
+    beforeStyles,
+    beforeRemoveClass,
+    beforeAddClass,
+    onFinish,
+    progressStart,
+    progressStep,
+    progressEnd
+  };
+};
+
+export { createAnimation as c };