Question

我正在制作一个我在动画中左侧幻灯片的网站。当它激活时，滚动条出现在底部，使页面上下跳动一点。反正有没有让滚动条消失或改变我的动画代码来阻止它？

Chrome＆amp; IE是可以的，但Firefox是一个跳跃的。

HTML

 <div id="ftr-tagline">
    <div class="slideLeft" id="ftr1-animation">
        <div class="one-third first">
            <div class="one-call">
                One Call...
            </div><!-- .one-call -->
        </div><!-- .one-third -->
    </div><!-- #ftr1-animation -->
    <div class="slideLeft" id="ftr2-animation">
        <div class="one-third">
            <div class="one-contact">
                One Contact...
            </div><!-- .one-contact -->
        </div><!-- .one-third -->
    </div><!-- #ftr2-animation -->
    <div class="slideLeft" id="ftr3-animation">
        <div class="one-third last">
            <div class="one-culture">
                One Culture...
            </div> <!-- .one-contact -->
        </div><!-- .one-third -->
    </div> <!-- #ftr3-animation -->
</div>

CSS

/*
==============================================
slideLeft
==============================================
*/


.page-id-4 #ftr1-animation, .page-id-4 #ftr2-animation, .page-id-4 #ftr3-animation{
    visibility: hidden;
}
.page-id-4 .slideLeft{
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;  

    animation-duration: 1s; 
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

     /* Keep animation visible after animation finishes */
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards; 
}

@keyframes slideLeft {
    0% {transform: translateX(150%);}
    100% {transform: translateX(0%);
    visibility: visible;}
}

@-webkit-keyframes slideLeft {
    0% {-webkit-transform: translateX(150%);}   
    100% {-webkit-transform: translateX(0%);
    visibility: visible;}
}


.page-id-4 #ftr1-animation{
    -webkit-animation-delay: 2s; /* Safari and Chrome */
    animation-delay: 2s;
}
.page-id-4 #ftr2-animation{
    -webkit-animation-delay: 3s; /* Safari and Chrome */
    animation-delay: 3s;
}
.page-id-4 #ftr3-animation{
    -webkit-animation-delay: 4s; /* Safari and Chrome */
    animation-delay: 4s;    
}

Answer 1

最简单的方法是隐藏滑动元素的父级溢出。

如：

#ftr-tagline{
    overflow: hidden;
}

或者如果你能逃脱它：

html, body{
    overflow-x: hidden;
}

动画和隐藏底部滚动条

1 个答案: