The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

CSS3 Animation

View previous topic View next topic Go down

Solved CSS3 Animation

Post by SarkZKalie on September 7th 2014, 12:34 pm

Hi guys

I found this code from Google.
CSS:

Code:
<style>
body
{
background: url('https://dl.dropbox.com/u/47626020/COO-Style/2x.jpg') no-repeat #FFF fixed;
animation:mybirst 25s infinite;
animation-delay:5s;
-moz-animation-delay:5s; /* Firefox */
-webkit-animation-delay:5s; /*Safari and Chrome */
-moz-animation:mybirst 25s infinite; /* Firefox */
-webkit-animation:mybirst 25s infinite; /* Safari and Chrome */
}

@keyframes mybirst

{
0% {background: url('https://dl.dropbox.com/u/47626020/MS_mercedes_wallpaper_1600x1200.jpg') no-repeat #FFF fixed;}
33% {background: url('https://dl.dropbox.com/u/47626020/COO-Style/2x.jpg') no-repeat #FFF fixed;}
66% {background: url('https://dl.dropbox.com/u/47626020/maplestory_wallpaper_05_1600x1200.jpg') no-repeat #FFF fixed;}
100% {background: url('https://dl.dropbox.com/u/47626020/MS_mercedes_wallpaper_1600x1200.jpg') no-repeat #FFF fixed;}

}

@-moz-keyframes mybirst /* Firefox */

{
0% {background: url('https://dl.dropbox.com/u/47626020/MS_mercedes_wallpaper_1600x1200.jpg') no-repeat #FFF fixed;}
33% {background: url('https://dl.dropbox.com/u/47626020/COO-Style/2x.jpg') no-repeat #FFF fixed;}
66% {background: url('https://dl.dropbox.com/u/47626020/maplestory_wallpaper_05_1600x1200.jpg') no-repeat #FFF fixed;}
100% {background: url('https://dl.dropbox.com/u/47626020/MS_mercedes_wallpaper_1600x1200.jpg') no-repeat #FFF fixed;}

}

@-webkit-keyframes mybirst /* Safari and Chrome */

{
0% {background: url('https://dl.dropbox.com/u/47626020/MS_mercedes_wallpaper_1600x1200.jpg') no-repeat #FFF fixed;}
33% {background: url('https://dl.dropbox.com/u/47626020/COO-Style/2x.jpg') no-repeat #FFF fixed;}
66% {background: url('https://dl.dropbox.com/u/47626020/maplestory_wallpaper_05_1600x1200.jpg') no-repeat #FFF fixed;}
100% {background: url('https://dl.dropbox.com/u/47626020/MS_mercedes_wallpaper_1600x1200.jpg') no-repeat #FFF fixed;}

}
</style>

Question:

1) How can I make the code auto-change background images after 4 hours? - CSS only, i don't want to use mayny script Sad
2) About element 'background-size:cover',

I added some images in the code with 1366x768 resolution, and tried my page on a PC with 1600x900 resolution. When the background have been changed, it left a #FFF background-color on right & bottom.
Is there anyway to fix it?

Thanks for reading, hope you can help Very Happy

Live Demo: HERE


Last edited by sarkzkalie01 on September 8th 2014, 5:13 am; edited 1 time in total

SarkZKalie
Forumember

Male Posts : 448
Reputation : 78
Language : English

http://rotavn.nstars.org/

Back to top Go down

Solved Re: CSS3 Animation

Post by Ange Tuteur on September 7th 2014, 6:03 pm

Hello sarkzkalie01,

It is possible to set the animation duration to a long time, however, this will be reset every time you move to another page. CSS is only able to manipulate the style of the current page, it lacks the ability to cache data or set cookies which would be necessary for what you want to do.

To have a background fit to the view point of the user, use the background-size property.
Code:
body { background-size:100% }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: CSS3 Animation

Post by SarkZKalie on September 8th 2014, 5:12 am

You made my day :3 Thanks
Code:
0% {background: url('http://i.imgur.com/Ad8dAjk.jpg');background-size:100%;}

SarkZKalie
Forumember

Male Posts : 448
Reputation : 78
Language : English

http://rotavn.nstars.org/

Back to top Go down

Solved Re: CSS3 Animation

Post by Ange Tuteur on September 8th 2014, 7:18 am

You're welcome

Topic archived

Have a nice day. Smile

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum