CSS-转换：translateX（-200％）创建的水平滚动条

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-转换：translateX（-200％）创建的水平滚动条

问题描述

1 个解决方案

解决方案1
-1 2016-10-09 22:27:58

CSS-转换：translateX（-200％）创建的水平滚动条

问题描述

1 个解决方案

解决方案1 -1 2016-10-09 22:27:58

解决方案1
-1 2016-10-09 22:27:58