feat: 'angle', 'blur' and 'iteration' options can also be passed as a number

each number will be properly converted to a string with its corresponding unit,
before it is passed to 'setCssProperty()'

Author: igorMSoares

js-css-animations/animate.js

@@ -115,11 +115,16 @@ const updateCssProperties = (element, opts) => {
   removeInlineTransition(element);
   CUSTOM_CSS_PROPERTIES.forEach(prop => {
     if (typeof opts[prop] === 'string' || typeof opts[prop] === 'number') {
-      if (
-        ['delay', 'duration'].includes(prop) &&
-        typeof opts[prop] === 'number'
-      ) {
-        opts[prop] = `${opts[prop]}ms`;
+      if (typeof opts[prop] === 'number') {
+        const unit = {
+          duration: 'ms',
+          angle: 'deg',
+          blur: 'px',
+          iteration: '',
+        };
+        unit.delay = unit.duration;
+
+        opts[prop] = `${opts[prop]}` + unit[prop];
       }
       setCssProperty(element, prop, opts[prop]);
     }

main.js

@@ -66,7 +66,7 @@ jsCssAnimations.init.collapse({
 
 jsCssAnimations.init.fade({
   trigger: '.fade--btn',
-  blur: '2px',
+  blur: 12,
   keepSpace: true,
 });
 
@@ -97,7 +97,7 @@ jsCssAnimations.init.rotate({
   start: () => {
     if (validateInput(document.querySelector('#rotation-angle'))) {
       // @ts-ignore
-      const angle = `${document.getElementById('rotation-angle')?.value}deg`;
+      const angle = Number(document.getElementById('rotation-angle')?.value);
       jsCssAnimations.rotate('.rotation-area', { angle: angle });
     }
   },
@@ -107,7 +107,7 @@ jsCssAnimations.init.rotate({
 });
 
 jsCssAnimations.show.fade('#anchor img', {
-  iteration: 'infinite',
+  iteration: 10,
   duration: '1s',
   direction: 'alternate',
 });