Question

我已经为页面中的元素创建了动画，从左侧滑入，所以它的起点是

transform: translateX(-200%)

但是当页面加载时它有一个滚动条。我正在使用Chrome。它也发生在FF。我还得到了

的垂直滚动条

transform: translateY(200%)

我尝试使用

body, html{
  overflow: hidden;
}

这似乎使滚动条消失，但动画也不起作用，我得到空窗口，直到动画结束。问题是如何使用具有相同参数但没有滚动条（水平和垂直）的动画。

更多代码：

.text {
   transform: translateX(-200%);
  -webkit-transform: translateX(-200%);
   animation: slide-in-fleft 1s forwards;
  -webkit-animation: slide-in-fleft 1s forwards;
  animation-delay: 1s;
}
@keyframes slide-in-fleft {
  100% { transform: translateX(0%); }
}

Answer 1

请尝试以下代码：

<!DOCTYPE html>
    <html>
        <head>
            <style> 
                div {
                    width: 100px;
                    height: 100px;
                    background-color: red;
                    -webkit-animation-name: example; /* Chrome, Safari, Opera */
                    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
                    animation-name: example;
                    animation-duration: 2s;
                    transform: translateX(200%);
                 }

                    /* Chrome, Safari, Opera */
                 @-webkit-keyframes example {
                    from {transform: translateX(-200%);}
                    to {transform: translateX(200%);}
                 }

                    /* Standard syntax */
                 @keyframes example {
                    from {transform: translateX(-200%);}
                    to {transform: translateX(200%);}
                }
            </style>
        </head>
        <body>

            <div></div>

        </body>
    </html>

动画完成后，它会变回原来的风格

css - transform：translateX（-200％）创建了水平滚动条

1 个答案: