diff --git a/client/src/constants.jsx b/client/src/constants.jsx
index 9582d8b6..dbe87b53 100644
--- a/client/src/constants.jsx
+++ b/client/src/constants.jsx
@@ -1,6 +1,9 @@
 module.exports = {
     TIMES: {
         RESOLUTION_TIME_MS: 2000,
+        START_SKILL: 1000,
+        END_SKILL: 1000,
+        POST_SKILL: 1500,
     },
 
     ITEMS: {
diff --git a/client/src/events.jsx b/client/src/events.jsx
index 32927d6e..b13423de 100644
--- a/client/src/events.jsx
+++ b/client/src/events.jsx
@@ -24,8 +24,18 @@ function registerEvents(store) {
                 const newRes = game.resolved.slice(currentGame.resolved.length);
                 return eachSeries(newRes, (r, cb) => {
                     if (['Disable', 'TargetKo'].includes(r.event[0])) return cb();
-                    store.dispatch(actions.setResolution(r));
-                    return setTimeout(cb, TIMES.RESOLUTION_TIME_MS);
+                    // Create 3 new events for combat animations
+                    const sequence = ['START_SKILL', 'END_SKILL', 'POST_SKILL'];
+                    return eachSeries(sequence, (stage, sCb) => {
+                        const stagedR = Object.create(r);
+                        stagedR.stage = stage;
+                        store.dispatch(actions.setResolution(stagedR));
+                        return setTimeout(sCb, TIMES[stage]);
+                    }, err => {
+                        if (err) return console.error(err);
+                        // Finished this resolution
+                        return cb();
+                    });
                 }, err => {
                     if (err) return console.error(err);
                     store.dispatch(actions.setResolution(null));
diff --git a/client/src/utils.jsx b/client/src/utils.jsx
index 00a24307..b97f3b2b 100644
--- a/client/src/utils.jsx
+++ b/client/src/utils.jsx
@@ -126,10 +126,9 @@ function eventClasses(resolution, cryp) {
 
     if (type === 'Damage') {
         const { skill, amount, mitigation, colour } = event;
-
-        if (colour === 'RedDamage') return 'red-damage';
-        if (colour === 'BlueDamage') return 'blue-damage';
-        if (colour === 'GreenDamage') return 'green-damage';
+        if (colour === 'RedDamage' && resolution.stage === 'POST_SKILL') return 'red-damage';
+        if (colour === 'BlueDamage' && resolution.stage === 'POST_SKILL') return 'blue-damage';
+        if (colour === 'GreenDamage' && resolution.stage === 'POST_SKILL') return 'green-damage';
     }
 
     if (type === 'Healing') {
@@ -165,6 +164,7 @@ function eventClasses(resolution, cryp) {
 
 function getCombatText(cryp, resolution) {
     if (!resolution) return '';
+    if (resolution.stage !== 'POST_SKILL') return '';
     if (cryp.id !== resolution.target.id) return '';
 
     const [type, event] = resolution.event;