转换与加载时的关键帧

时间:2018-02-23 22:18:08

标签: jquery css css3 css-transitions fullpage.js

我正在使用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;
}

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

0 个答案:

没有答案