CSS Animations (keyframes) aren't working

[wouterrrfm]

Hi all,

I made a small layout by using HTML and CSS. I've added it as a browser source. Unfortunately, the CSS keyframes aren't working. Is this unsupported by OBS? Here is an example of my code.

#cover2 {
animation: move 40s infinite ease-in-out;
animation-fill-mode: both;
animation-delay: 3s;
animation-name: trans1;
animation-direction: normal;

}



@keyframes trans1 {
0% {
opacity: 0;
transform: translateY(30px);
}
3% {
opacity: 0;
transform: translateY(30px);
}
4% {
opacity: 100%;
transform: translateY(0);
}
50% {
opacity: 100%;
transform: translateY(0);
}
51% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 0;
transform: translateY(30px);
}
}


Regards,
Wouter

 

[Dejaviewer]

When importing that window, have you tried on the capture method using Windows graphic capture? Dont know if this is the solution.

 

[wouterrrfm]

Let me give it a try, thanks!

 

[OwMyBeep]

My client is using Streamlabs OBS and has a very nice transition concept. However, I am also having a very hard time getting the right animations and transitions from CSS to translate into alerts. I've tried slobs and studio and both have the same issues - and a hard time recognizing when to save (when I go to html areas it often doesn't save the css portion and I have to re-edit).
It is at the point where I may need to create a .webm clip to accomplish what I should be able to easily do in the custom fields.
I'd love to know if there are any plans in the near future to incorporate a better html/css editor? It seems to me that it was placed in there as an after-thought. If I were just doing this for me I'd say no problem and work around it but this is a specific request from a client and a big-time streamer who sees competitors with fancy alerts. I'm concerned the .webm option may unfortunately cause strain and interfere with the stream compared to easy css composition.
any direction for resource would be great, to encourage streamlabs to cooperate!