Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 Slide Out Animation on Page Load

CSS3 Slide Out Animation on Page Load

Problem

I am trying to get an image to slide out to the left when the page loads using purely CSS.

So, far I've got: http://jsfiddle.net/o7thwd/qZbhJ/ and it seems to work. The issue I can't seem to get over is how the image comes back into view once the animation is over.

#slide {
    left:0;
    width:268px;    
    -moz-animation-name: slideOut;
    -moz-animation-iteration-count: once;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 1.5s;
    -webkit-animation-name: slideOut;
    -webkit-animation-iteration-count: once;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 1.5s;
    -o-animation-name: slideOut;
    -o-animation-iteration-count: once;
    -o-animation-timing-function: ease-out;
    -o-animation-duration: 1.5s;
    animation-name: slideOut;
    animation-iteration-count: once;
    animation-timing-function: ease-out;
    animation-duration: 1.5s; 
}
@-o-keyframes slideOut {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -268px;
    }
}
@keyframes slideOut {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -268px;
    }
}
@-moz-keyframes slideOut {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -268px;
    }
}
@-webkit-keyframes slideOut {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -268px;
    }
}

How can I get it to stay folded to the left like it does on initial page load?

Problem courtesy of: Kevin

Solution

basically you add the following CSS -webkit-animation-fill-mode: forwards; and the animation end will be persistent rather than revert back to the original.

WORKING JSFIDDLE

Oh and you only need to use the -webkit- vendor specific for animations there are no -moz- or -o- vendor specifics for animations

CSS:

#slide {
    left:0;
    width:268px;    
    -webkit-animation-name: slideOut;
    -webkit-animation-iteration-count: once;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 1.5s;   
    animation-name: slideOut;
    animation-iteration-count: once;
    animation-timing-function: ease-out;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes slideOut {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -268px;
    }
}

@-webkit-keyframes slideOut {
    0% {
        left: 0;
    }
    100% {
        left: -268px;
    }
}
Solution courtesy of: Charles380

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 Slide Out Animation on Page Load

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×