CODEWITHSUNDEEP
csscss-animationskeyframe
Jesse Winton
Jesse Winton

Reputation: 696

keyframe animation on load

So, I'm setting up some keyframe animations to animate content in on a one page AJAX site. The problem I'm facing is this. When the page loads, I want to have the main content block slide in from offscreen. It starts offscreen with transform: translate3d(-100%,0,0); and my keyframes animate it to transform: translate3d(0, 0, 0);.

@keyframes aboutSlide {
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@-moz-keyframes aboutSlide {
    100% {
        opacity: 1;
        -moz-transform: translate3d(0, 0, 0);
    }
}
@-o-keyframes aboutSlide {
    100% {
        opacity: 1;
        -o-transform: translate3d(0, 0, 0);
    }
}
@-webkit-keyframes aboutSlide {
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
}

    #about .content {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
        animation: aboutSlide 1.5s ease-in-out 1;
        -moz-animation: aboutSlide 1.5s ease-in-out 1;
        -o-animation: aboutSlide 1.5s ease-in-out 1;
        -webkit-animation: aboutSlide 1.5s ease-in-out 1;
        -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
        transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    }

So, once the animation is complete, the content reverts to the original transform: translate3d(-100%,0,0); which is definitely not what I want it doing. Here is a link to what I have right now.

Any help would be greatly appreciated. Thanks!

Upvotes: 1

Views: 1055

Answers (1)

C.Schubert
C.Schubert

Reputation: 2064

Hey you can use animation-fill-mode:forwards this will stop the animation on the last frame.

Upvotes: 2

Related Questions