加载时的关键帧动画

Question

因此，我正在设置一些关键帧动画来为单页 AJAX 网站中的内容制作动画。我面临的问题是这样的。当页面加载时，我想让主要内容块从屏幕外滑入。它以 transform: translate3d(-100%,0,0); 在屏幕外开始，我的关键帧将其动画化为 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);
    }

所以，一旦动画完成，内容就会恢复到原来的状态 transform: translate3d(-100%,0,0);，这绝对不是我想要的。 Here 是我现在拥有的 link。

如有任何帮助，我们将不胜感激。谢谢！

Answer 1

嘿，你可以使用 animation-fill-mode:forwards 这将在最后一帧停止动画。

加载时的关键帧动画

keyframe animation on load

css

keyframe

css-animations