CSS3 Animation
2 posters
Page 1 of 1
CSS3 Animation
Hi guys
I found this code from Google.
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
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
Live Demo: HERE
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
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
Live Demo: HERE
Last edited by sarkzkalie01 on September 8th 2014, 5:13 am; edited 1 time in total
Re: CSS3 Animation
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.
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% }
Re: CSS3 Animation
You made my day :3 Thanks
- Code:
0% {background: url('http://i.imgur.com/Ad8dAjk.jpg');background-size:100%;}
Similar topics
» Two Question about CSS3 & Forum promotion!
» Unable to change color of text in CSS3
» How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3 (Need Help)
» i need Help For This How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
» Can someone put this into an animation? [DONE]
» Unable to change color of text in CSS3
» How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3 (Need Help)
» i need Help For This How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
» Can someone put this into an animation? [DONE]
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum