Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Transition To Video

Posted by: sonic4 Feb 28 2017, 11:45 AM

So you know how in older video games where, if you wait on a title screen long enough, you get a demo? I want to do that in CSS, however, i don't know how. Here's my @keyframes rule

@keyframes switch
{
from {background-image: url(images/titlescreen.gif)}
to {background-image: url(videos/commercial.mp4)}
}

Here's what I put in my body CSS (same sheet):

background-image: url(images/titlescreen.gif);
background-repeat: no-repeat;
background-size: cover;
animation-name: switch;
animation-duration: 10s;

IF this is impossible, then let me know.

Posted by: Christian J Feb 28 2017, 05:32 PM

QUOTE(sonic4 @ Feb 28 2017, 05:45 PM) *

So you know how in older video games where, if you wait on a title screen long enough, you get a demo? I want to do that in CSS, however, i don't know how.

AFAIK you can't use videos in CSS backgrounds, but an animated GIF image might work, or you could create the whole "video" with complex animations (as opposed to using an MP4 file or similar multimedia formats). Or you could use javascript to display an autoplaying HTML5 VIDEO element with an MP4 file.

Posted by: sonic4 Mar 1 2017, 12:03 PM

Thank you.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)