diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css
index 72be6b32..2b911195 100644
--- a/client/assets/styles/game.css
+++ b/client/assets/styles/game.css
@@ -68,7 +68,7 @@
         "stats      stats ";
 
     transition-property: all;
-    transition-duration: 0.5s;
+    transition-duration: 0.25s;
     transition-delay: 0;
     transition-timing-function: ease;
 }
@@ -310,3 +310,73 @@ CRYP DAMAGE
 .resolving .skills button {
     display: none;
 }
+
+
+/*
+    COMBAT ANIMATIONS
+*/
+
+/* ----------------------------------------------
+ * Generated by Animista on 2019-5-21 11:38:30
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+.attack-cast {
+    -webkit-animation: attack-cast 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+            animation: attack-cast 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+}
+
+@-webkit-keyframes attack-cast {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(-5em);
+            transform: translateY(-5em);
+    opacity: 0;
+  }
+}
+@keyframes attack-cast {
+  0% {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(-5em);
+            transform: translateY(-5em);
+    opacity: 0;
+  }
+}
+
+.attack-hit {
+    -webkit-animation: attack-hit 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+            animation: attack-hit 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+@-webkit-keyframes attack-hit {
+  0% {
+    -webkit-transform: translateY(-1000px) translateX(1000px);
+            transform: translateY(-1000px) translateX(1000px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateY(0) translateX(0);
+            transform: translateY(0) translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes attack-hit {
+  0% {
+    -webkit-transform: translateY(-1000px) translateX(1000px);
+            transform: translateY(-1000px) translateX(1000px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateY(0) translateX(0);
+            transform: translateY(0) translateX(0);
+    opacity: 1;
+  }
+}
diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx
index 557d3bae..132abe99 100644
--- a/client/src/components/game.component.jsx
+++ b/client/src/components/game.component.jsx
@@ -127,9 +127,10 @@ function GamePanel(props) {
             </figure>
         ));
 
-        const combatText = getCombatText(cryp, resolution);
+        const [combatText, combatClass] = getCombatText(cryp, resolution);
+        const combatTextClass = `combat-text ${combatClass}`;
         const combatTextEl = combatText
-            ? <div className="combat-text">{combatText}</div>
+            ? <div className={combatTextClass}>{combatText}</div>
             : null;
 
         const effects = cryp.effects.length
diff --git a/client/src/components/game.cryp.jsx b/client/src/components/game.cryp.jsx
index 2f29b81d..d5d73fb3 100644
--- a/client/src/components/game.cryp.jsx
+++ b/client/src/components/game.cryp.jsx
@@ -66,9 +66,10 @@ function GameCryp(props) {
     });
 
 
-    const combatText = getCombatText(cryp, resolution);
+    const [combatText, combatClass] = getCombatText(cryp, resolution);
+    const combatTextClass = `combat-text ${combatClass}`;
     const combatTextEl = combatText
-        ? <div className="combat-text">{combatText}</div>
+        ? <div className={combatTextClass}>{combatText}</div>
         : null;
 
     const effects = cryp.effects.length
diff --git a/client/src/utils.jsx b/client/src/utils.jsx
index 08e4341b..15d63886 100644
--- a/client/src/utils.jsx
+++ b/client/src/utils.jsx
@@ -280,7 +280,7 @@ function getCombatSequence(event) {
 }
 
 function getCombatText(cryp, resolution) {
-    if (!resolution) return '';
+    if (!resolution) return ['', ''];
 
 
     const [type, event] = resolution.event;
@@ -291,27 +291,27 @@ function getCombatText(cryp, resolution) {
     const postSkill = resolution.stage === 'POST_SKILL';
 
     if (type === 'Ko') {
-        if (postSkill && target) return 'KO!';
+        if (postSkill && target) return ['KO!', ''];
     }
 
     if (type === 'Disable') {
         const { skill, disable } = event;
-        if (startSkill && source) return `${skill}`;
-        if (endSkill && target) return `${skill}`;
-        if (postSkill && target) return `${disable}`;
+        if (startSkill && source) return [`${skill}`, ''];
+        if (endSkill && target) return [`${skill}`, ''];
+        if (postSkill && target) return [`${disable}`, ''];
     }
 
     if (type === 'Immunity') {
         const { skill, immunity } = event;
-        if (startSkill && source) return `${skill}`;
-        if (endSkill && target) return `${skill}`;
-        if (postSkill && target) return 'IMMUNE';
+        if (startSkill && source) return [`${skill}`, ''];
+        if (endSkill && target) return [`${skill}`, ''];
+        if (postSkill && target) return ['IMMUNE', ''];
     }
 
     if (type === 'TargetKo') {
         const { skill } = event;
-        if (startSkill && source) return `${skill}`;
-        if (endSkill && target) return `${skill}`;
+        if (startSkill && source) return [`${skill}`, ''];
+        if (endSkill && target) return [`${skill}`, ''];
     }
 
     if (type === 'Damage') {
@@ -319,55 +319,55 @@ function getCombatText(cryp, resolution) {
         const mitigationText = mitigation
             ? `(${mitigation})`
             : '';
-        if (startSkill && source) return `${skill}`;
-        if (endSkill && target) return `${skill}`;
-        if (postSkill && target) return `${amount} ${mitigationText}`;
+        if (startSkill && source) return [`${skill}`, `${skill.toLowerCase()}-cast`];
+        if (endSkill && target) return [`${skill}`, `${skill.toLowerCase()}-hit`];
+        if (postSkill && target) return [`${amount} ${mitigationText}`, ''];
     }
 
     if (type === 'Healing') {
         const { skill, amount, overhealing } = event;
-        if (startSkill && source) return `${skill}`;
-        if (endSkill && target) return `${skill}`;
-        if (postSkill && target) return `${amount} (${overhealing} OH)`;
+        if (startSkill && source) return [`${skill}`, ''];
+        if (endSkill && target) return [`${skill}`, ''];
+        if (postSkill && target) return [`${amount} (${overhealing} OH)`, ''];
     }
 
     if (type === 'Inversion') {
         const { skill } = event;
-        if (startSkill && source) return `${skill}`;
-        if (endSkill && target) return `${skill}`;
-        if (postSkill && target) return 'INVERT';
+        if (startSkill && source) return [`${skill}`, ''];
+        if (endSkill && target) return [`${skill}`, ''];
+        if (postSkill && target) return ['INVERT', ''];
     }
 
     if (type === 'Reflection') {
         const { skill } = event;
-        if (startSkill && source) return `${skill}`;
-        if (endSkill && target) return `${skill}`;
-        if (postSkill && target) return 'REFLECT';
+        if (startSkill && source) return [`${skill}`, ''];
+        if (endSkill && target) return [`${skill}`, ''];
+        if (postSkill && target) return ['REFLECT', ''];
     }
 
     if (type === 'Effect') {
         const { skill, effect, duration } = event;
-        if (startSkill && source) return `${skill}`;
-        if (endSkill && target) return `${skill}`;
-        if (postSkill && target) return `+ ${effect} ${duration}T`;
+        if (startSkill && source) return [`${skill}`, ''];
+        if (endSkill && target) return [`${skill}`, ''];
+        if (postSkill && target) return [`+ ${effect} ${duration}T`, ''];
     }
 
     if (type === 'Recharge') {
         const { skill, red, blue } = event;
-        if (startSkill && source) return `${skill}`;
-        if (endSkill && target) return `${skill}`;
-        if (postSkill && target) return `+${red}R ${blue}B`;
+        if (startSkill && source) return [`${skill}`, ''];
+        if (endSkill && target) return [`${skill}`, ''];
+        if (postSkill && target) return [`+${red}R ${blue}B`, ''];
     }
 
     if (type === 'Skill' || type === 'AoeSkill') {
         const { skill } = event;
-        if (startSkill && source) return `${skill}`;
-        if (endSkill && target) return `${skill}`;
+        if (startSkill && source) return [`${skill}`, ''];
+        if (endSkill && target) return [`${skill}`, ''];
     }
 
     if (type === 'Removal') {
         const { effect } = event;
-        if (postSkill && target) return `-${effect}`;
+        if (postSkill && target) return [`-${effect}`, ''];
     }