CSS - Transformation: translateX (-200%) erstellt horizontale Scrollbar

Ich habe auf der Seite erstellt Animation für das Element von der linken Seite zu schieben, so ist es den AusgangspunktCSS - Transformation: translateX (-200%) erstellt horizontale Scrollbar

ist

transform: translateX(-200%)

aber wenn die Seite geladen wird es hat eine Bildlaufleiste. Ich benutze Chrome. es passiert auch in FF. Ich bin auch vertikale Bildlaufleiste für

transform: translateY(200%)

immer habe ich versucht

body, html{ 
    overflow: hidden; 
}

verwendet, die die Bildlaufleisten verschwinden zu machen scheint, dann aber auch die Animation nicht funktioniert, ich bin immer leeres Fenster bis die Animation endet. Die Frage ist, wie kann ich die Animation mit denselben Parametern aber ohne die Bildlaufleiste (horizontal und vertikal) verwenden.

mehr Code:

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

Quelle

2016-10-09 user2880391

-1

Versuchen Sie, den folgenden Code:

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

Wenn eine Animation beendet ist, ändert sich wieder in seinen ursprünglichen Stil

Quelle

2016-10-09 22:27:58 Strs

es nicht wirklich die Frage nicht beantworten . Vielen Dank. – user2880391

CSS - Transformation: translateX (-200%) erstellt horizontale Scrollbar

Antwort

Verwandte Themen