Grow your CSS skills. Land your dream job.

Full Background slide show

  • # March 2, 2013 at 8:06 pm

    I found this neat tutorial on background image slideshows here http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

    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

    I happen to have watched this video today and I think it can help you to understand how basic animations work: http://css-tricks.com/video-screencasts/97-intro-to-css-animations/

    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.

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