css - преобразование: translateX (-200%) создал горизонтальную полосу прокрутки

Я создал анимацию для элемента на странице, чтобы он скользил слева, поэтому его отправная точка

transform: translateX(-200%)

но когда страница загружается, у нее есть полоса прокрутки. Я использую Хром. бывает и в ФФ. Я также получаю вертикальную полосу прокрутки для

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%); }
}

css scrollbar css-transforms
person user2880391    schedule 09.10.2016    source источник

Ответы (1)


arrow_upward
-1
arrow_downward

Попробуйте следующий код:

<!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>

Когда анимация закончена, она возвращается к исходному стилю.

person Strs    schedule 09.10.2016
comment
это на самом деле не отвечает на вопрос. Спасибо. - person user2880391; 10.10.2016