Giving VTT subtitles a fading out effect

Question

I'm currently trying to implement or test a new feature on my locally hosted page which plays video with subtitles on. The subtitle format being VTT.

I've been trying to find how to actually be able to edit the VTT itself as I am trying to give a fading out effect for the subtitle.

This probably won't be helpful but I just tried implementing it via the style.css part of my project but sadly it only affects the texts of the page and I am not sure how to make it work for the texts from the VTT file itself.

Down below is the part I've tried to work out on the style.css

.fade-in {
  animation: fadeIn 2s;
}

.fade-out {
  animation: fadeOut 3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
     }     
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
     }     
}

Answer 1

There is a ::cue selector to modify the subtitle text on a video.

But not all css properties are allowed. You can change the color or opacity but you can not set the animation property.

Anyway, what you could do is to use css variable to set the opacity and the css variable could change with an animation

:root {
  --opacity-value: 1
}

::cue {
  opacity: var(--opacity-value);
}

@keyframes flickerAnimation {
  0%   { --opacity-value: 1; }
  50%  { --opacity-value: 0; }
  100% { --opacity-value: 1; }
}

video{
 animation: flickerAnimation 1s infinite;
}

An working example could be found here.