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

Я создал анимацию для элемента страницы, чтобы скользить в с левой стороны, так что это начальная точка являетсяCSS - преобразование: translateX (-200%) создали горизонтальную полосу прокрутки

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

источник

2016-10-09 user2880391

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

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

источник

2016-10-09 22:27:58 Strs

это не реально ответить на вопрос , Благодарю. – user2880391

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

ответ

Смежные вопросы