The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Full Background slide show

  • # March 2, 2013 at 8:06 pm

    I found this neat tutorial on background image slideshows here

    I’m trying to get the photo to ease-in and then stop. I don’t want it to go away. I’ve tried altering the css code by taking out the “ease-out” and adding in another “ease-in”. No matter what I do, it still performs an ease-out. Any suggestions?

    /* Animation for the slideshow images */
    @-webkit-keyframes imageAnimation {
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
    -webkit-animation-timing-function: ease-in; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }

    # March 2, 2013 at 8:16 pm

    This reply has been reported for inappropriate content.

    I happen to have watched this video today and I think it can help you to understand how basic animations work:

    In short, you’ll want your keyframes from opacity: 0 to opacity: 1 (or 0% and 100%) and run the animation only once… really, watch the video :P

    # March 2, 2013 at 8:44 pm

    Cool, Checking it out right now.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed