diff --git a/apps/client/src/views/timer/Timer.scss b/apps/client/src/views/timer/Timer.scss
index 5cb8590a5..b048889a9 100644
--- a/apps/client/src/views/timer/Timer.scss
+++ b/apps/client/src/views/timer/Timer.scss
@@ -120,12 +120,16 @@
         color: var(--timer-overtime-color-override, $timer-finished-color);
       }
 
-      &[data-phase="warning"] {
+      &[data-phase='warning'] {
         color: var(--timer-colour, var(--timer-warning-color-override));
       }
-      &[data-phase="danger"] {
+      &[data-phase='danger'] {
         color: var(--timer-colour, var(--timer-danger-color-override));
       }
+      &[data-type='none'] {
+        transition: 1s;
+        opacity: 0;
+      }
     }
   }
 
diff --git a/apps/client/src/views/timer/Timer.tsx b/apps/client/src/views/timer/Timer.tsx
index 187052d01..0c2b65572 100644
--- a/apps/client/src/views/timer/Timer.tsx
+++ b/apps/client/src/views/timer/Timer.tsx
@@ -179,6 +179,7 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings }
           <div
             className={cx(['timer', !isPlaying && 'timer--paused', showFinished && 'timer--finished'])}
             style={{ fontSize: `${timerFontSize}vw` }}
+            data-type={viewTimerType}
             data-phase={time.phase}
           >
             {display}