Keyframes cssAnimationsprozentsatz?

Question

Ich versuche, den folgenden Code zu verwenden, um Objekte von links nach rechts im Hintergrund zu schweben. Leider erscheint eine vertikale Bildlaufleiste trotz des overflow-y: hidden Attributs, das der Klasse hinzugefügt wird, wenn es aus dem Bildschirm ausgeht. Ich probierte Prozent (100% mit dem Übergang), aber es hat nicht funktioniert. Ich weiß nicht, dass es soll? Ich hatte gehofft, jemand könnte mir sagen, wie ich das beheben kann, wenn es nur mit CSS repariert werden kann.

.largest-slowest { 
    border: solid 0px #2d2d2d; 
    text-align: center; 
    z-index: -1000; 
    background: #575757; 
    height: 50px; 
    width: 50px; 
    overflow-y:hidden; 
} 

.largest-slowest { 
    -webkit-animation: cssAnimation 12.7734s 16 linear; 
    -moz-animation: cssAnimation 12.7734s 16 linear; 
    -o-animation: cssAnimation 12.7734s 16 linear; 
} 
@-webkit-keyframes cssAnimation { 
    from {-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(-100px);} 
    to { -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(2000px); } 
} 
@-moz-keyframes cssAnimation { 
    from { -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(-600px); } 
    to { -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(2000px); } 
} 
@-o-keyframes cssAnimation { 
    from { -o-transform: rotate(0deg) scale(1) skew(0deg) translate(-600px); } 
    to { -o-transform: rotate(0deg) scale(1) skew(0deg) translate(2000px); } 
} 

Answer 1

Neben dem Kommentar oben, müssen Sie overflow-y: hidden an die Mutter von .largest-slowest statt zu .largest-slowest selbst hinzuzufügen. Also, wenn Sie das Fenster nicht möchten, scrollen, wenn .largest-slowest aus dem Bildschirm geht, sollten Sie Ihre CSS in etwa so aussehen:

body { 
    overflow-y: hidden; 
} 

.largest-slowest { 
    border: solid 0px #2d2d2d; 
    text-align: center; 
    z-index: -1000; 
    background: #575757; 
    height: 50px; 
    width: 50px; 
}