diff --git a/client/src/components/anims/debuff.jsx b/client/src/components/anims/debuff.jsx
index 8d4a30ed..dfe2ae45 100644
--- a/client/src/components/anims/debuff.jsx
+++ b/client/src/components/anims/debuff.jsx
@@ -17,8 +17,9 @@ class Debuff extends Component {
                 class="skill-animation"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
-                style={{ transform: 'rotate(180deg)' }}
-                viewBox="0 0 200 200">
+                viewBox="0 0 200 200"
+                transform="rotate(180)"
+            >
                 <g>
                     <polygon class='debuff-one' points='0,190    100,300   190,190'/>
                     <polygon class='debuff-two' points='40,170    100,300   160,170'/>
@@ -41,25 +42,28 @@ class Debuff extends Component {
         this.animations.push(anime({
             targets: ['#debuff .debuff-one'],
             points: '0,190    100,10   190,190',
+
             easing: 'easeOutExpo',
-            delay: TIMES.TARGET_MAIN_DELAY,
-            duration: TIMES.TARGET_MAIN_DURATION,
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
         }));
 
         this.animations.push(anime({
             targets: ['#debuff .debuff-two'],
             points: '40,170    100,50   160,170',
+
             easing: 'easeOutExpo',
-            delay: TIMES.TARGET_MAIN_DELAY,
-            duration: TIMES.TARGET_MAIN_DURATION,
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
         }));
 
         this.animations.push(anime({
             targets: ['#debuff .debuff-three'],
             points: '70,150    100,90   130,150',
+
             easing: 'easeOutExpo',
-            delay: TIMES.TARGET_MAIN_DELAY,
-            duration: TIMES.TARGET_MAIN_DURATION,
+            delay: TIMES.TARGET_DELAY_MS,
+            duration: TIMES.TARGET_DURATION_MS,
         }));
     }