Added a notice that starts faded

public/content.css

@@ -106,12 +106,10 @@
 
 @keyframes fadeIn {
 	from { opacity: 0; }
-	  to { opacity: 1; }
 }
 
 @keyframes fadeOut {
-	from { opacity: 1; }
+	to { opacity: 0; }
-	  to { opacity: 0; }
 }
 
 .sponsorBlockSpacer {
@@ -136,6 +134,8 @@
 	padding-right: 5px;
 
 	border-collapse: unset;
+
+	transition: opacity 0.1s ease-out;
 }
 
 .sponsorSkipNotice .hidden {
@@ -148,11 +148,17 @@
 }
 
 .sponsorSkipNoticeFadeIn {
-	animation: fadeIn 0.5s;
+	animation: fadeIn 0.5s ease-out;
+}
+
+.sponsorSkipNoticeFaded {
+	opacity: 0.3;
 }
 
 .sponsorSkipNoticeFadeOut {
-	animation: fadeOut 3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+	transition: opacity 3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+	opacity: 0 !important;
+	animation: none !important;
 }
 
 .sponsorSkipNotice .sponsorSkipNoticeTimeLeft {

src/components/NoticeComponent.tsx

@@ -18,6 +18,7 @@ export interface NoticeProps {
     videoSpeed?: () => number,
 
     fadeIn?: boolean,
+    startFaded?: boolean,
     firstColumn?: React.ReactElement,
     firstRow?: React.ReactElement,
 
@@ -39,6 +40,8 @@ export interface NoticeState {
     countdownMode: CountdownMode,
 
     mouseHovering: boolean;
+
+    startFaded: boolean;
 }
 
 class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
@@ -73,7 +76,9 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
             //the countdown until this notice closes
             countdownTime: maxCountdownTime(),
             countdownMode: CountdownMode.Timer,
-            mouseHovering: false
+            mouseHovering: false,
+
+            startFaded: this.props.startFaded ?? false
         }
     }
 
@@ -91,9 +96,10 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
             <table id={"sponsorSkipNotice" + this.idSuffix} 
                 className={"sponsorSkipObject sponsorSkipNotice" 
                         + (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "")
+                        + (this.state.startFaded ? " sponsorSkipNoticeFaded" : "")
                         + (this.amountOfPreviousNotices > 0 ? " secondSkipNotice" : "")}
                 style={noticeStyle}
-                onMouseEnter={() => this.timerMouseEnter()}
+                onMouseEnter={() => { this.timerMouseEnter(); this.fadedMouseEnter(); } }
                 onMouseLeave={() => this.timerMouseLeave()}> 
                 <tbody>
 
@@ -175,6 +181,14 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
         )];
     }
 
+    fadedMouseEnter(): void {
+        if (this.state.startFaded) {
+            this.setState({
+                startFaded: false
+            });
+        }
+    }
+
     timerMouseEnter(): void {
         if (this.state.countdownMode === CountdownMode.Stopped) return;
 

src/components/SkipNoticeComponent.tsx

@@ -150,6 +150,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 amountOfPreviousNotices={this.amountOfPreviousNotices}
                 idSuffix={this.idSuffix}
                 fadeIn={true}
+                startFaded={true}
                 timed={true}
                 maxCountdownTime={this.state.maxCountdownTime}
                 videoSpeed={() => this.contentContainer().v?.playbackRate}