The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Transition To Video
sonic4
post Feb 28 2017, 11:45 AM
Post #1





Group: Members
Posts: 7
Joined: 6-February 17
Member No.: 26,296



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 28 2017, 05:32 PM
Post #2


.
********

Group: WDG Moderators
Posts: 7,728
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sonic4
post Mar 1 2017, 12:03 PM
Post #3





Group: Members
Posts: 7
Joined: 6-February 17
Member No.: 26,296



Thank you.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th November 2017 - 07:24 PM