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是我现在拥有的链接。

非常感谢任何帮助。谢谢！

Answer 1

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

加载时的关键帧动画

1 个答案: