diff --git a/content.css b/content.css
index 05fee444..590dc05a 100644
--- a/content.css
+++ b/content.css
@@ -58,6 +58,11 @@
 	  to { opacity: 1; }
 }
 
+@keyframes fadeOut {
+	from { opacity: 1; }
+	  to { opacity: 0; }
+}
+
 .sponsorBlockSpacer {
 	background-color: rgb(100, 100, 100);
 	border-color: rgb(100, 100, 100);
@@ -82,6 +87,10 @@
 	padding-right: 5px;
 }
 
+.sponsorBlockFadeOutAnimiation {
+	animation: fadeOut 3s;
+}
+
 .sponsorSkipNoticeTimeLeft {
 	color: #eeeeee;
 
diff --git a/utils/skipNotice.js b/utils/skipNotice.js
index 4c3b044c..b2f982f2 100644
--- a/utils/skipNotice.js
+++ b/utils/skipNotice.js
@@ -174,6 +174,13 @@ class SkipNotice {
             return;
         }
 
+        if (this.countdownTime == 3) {
+            //start fade out animation
+            let notice = document.getElementById("sponsorSkipNotice" + this.UUID);
+            notice.style.removeProperty("animation");
+            notice.classList.add("sponsorBlockFadeOutAnimiation");
+        }
+
         this.updateTimerDisplay();
     }
 
@@ -188,6 +195,11 @@ class SkipNotice {
         //inform the user
         let timeLeft = document.getElementById("sponsorSkipNoticeTimeLeft" + this.UUID);
         timeLeft.innerText = chrome.i18n.getMessage("paused");
+
+        //remove the fade out class if it exists
+        let notice = document.getElementById("sponsorSkipNotice" + this.UUID);
+        notice.classList.remove("sponsorBlockFadeOutAnimiation");
+        notice.style.animation = "none";
     }
 
     startCountdown() {