转换与加载时的关键帧

Question

我正在使用fullpage.js。当我使用以下时，转换发生在加载时，当我滚动到下一部分时它们反转，然后当返回到部分时它再次动画：

.section-one .slide-one > .fp-tableCell h1,
.section-one .slide-one > .fp-tableCell p {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
    -webkit-transition: opacity .66s ease-in-out,
                -webkit-transform .66s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: opacity .66s ease-in-out,
                -webkit-transform .66s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    transition: transform .66s cubic-bezier(0.16, 0.68, 0.43, 0.99),
                opacity .66s ease-in-out;
    transition: transform .66s cubic-bezier(0.16, 0.68, 0.43, 0.99),
                opacity .66s ease-in-out,
                -webkit-transform .66s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

.section-one.active .slide-one.active > .fp-tableCell h1,
.section-one.active .slide-one.active > .fp-tableCell p {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
}

.section-one.active .slide-one.active > .fp-tableCell h1 {
    -webkit-transition-delay: .44s;
            transition-delay: .44s;
}

.section-one.active .slide-one.active > .fp-tableCell p {
    -webkit-transition-delay: .22s;
            transition-delay: .22s;
}

.section-one.active .slide-one.active > .fp-tableCell p + p {
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
}

但当我使用animate.css关键帧和“animation：name;”时它加载一次，不会在页面休假时反转，当你回到页面时它也没有动画：

.section-one .slide-one > .fp-tableCell h1 {
    animation: bounceInLeftM 3s;

}
.section-one .slide-one > .fp-tableCell h2{
    animation: bounceInRightM 3s;
}
.section-one .slide-one > .fp-tableCell h3{
    animation: growIn 3s;
}

.section-one .slide-one > .fp-tableCell p, a, #slogon, .linkblock {
animation: flipInX 1s;}

.section-one.active .slide-one.active > .fp-tableCell h1 {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
}
.section-one.active .slide-one.active > .fp-tableCell h2 {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
}
.section-one.active .slide-one.active > .fp-tableCell h3 {
    animation: growIn 3s;
}
.section-one.active .slide-one.active > .fp-tableCell p, span, #slogon, .linkblock {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
}

.section-one.active .slide-one.active > .fp-tableCell h1 {
    -webkit-transition-delay: .44s;
            transition-delay: .44s;
}
.section-one.active .slide-one.active > .fp-tableCell h2 {
    -webkit-transition-delay: .44s;
            transition-delay: .44s;
}
.section-one.active .slide-one.active > .fp-tableCell p, span, #slogon, .linkblock {
    -webkit-transition-delay: .22s;
            transition-delay: .22s;
}

.section-one.active .slide-one.active > .fp-tableCell  {
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
}

有兴趣知道如何区别对待这些以及如何控制行为。