Grow your CSS skills. Land your dream job.

Scrolling background problem in FF

  • # August 28, 2011 at 6:21 pm

    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??

    # August 28, 2011 at 6:52 pm

    @joshwhite – It works since Gecko 5.0 release. Update firefox?

    # August 29, 2011 at 2:15 am

    Well played sir. My version was the newest but after a reinstall everything worked just fine. Appreciate the response!

    # August 29, 2011 at 2:31 am

    @JoshWhite – maybe something similar is causing the dropbox issue we discussed privately? Hopefully the new invite takes care of that.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".