Hi everyone!
I was helping a buddy of mine whose in a band build a little wordpress site and I wanted to use something cool like the scrolling background Chris recently did an article on. My question is: why won’t the animations work in FF?? I even noticed that the Fiddle Chris had put together didn’t work either.
Here’s the basic layout as I’m building it. I’m pretty much using the same structure as the demo:
#viewport {
background:transparent url('images/view-port.png');
width:673px;
height:160px;
position:absolute;
top:75px;
left:75px;
z-index:20;
overflow:hidden;
}
#scene {
width:650px;
height:120px;
position:absolute;
top:90px;
left:83px;
z-index:10;
overflow:hidden;
}
#scene > .slideshow {
height: 120px;
width: 1983px;
background: url('images/scene-bg.jpg');
position: absolute;
top: 0;
left: 0;
height: 100%;
-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
-webkit-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
-webkit-animation: moveSlideshow 50s linear infinite;
-moz-animation: moveSlideshow 50s linear infinite;
}
@-webkit-keyframes moveSlideshow {
0% { left: 0; }
100% { left: -983px; }
}
@-moz-keyframes moveSlideshow {
0% { left: 0; }
100% { left: -983px; }
}
Is it even possible for this to flow into FF??
