css - 关键帧 cssAnimation 百分比？

Question

我正在尝试使用以下代码让对象在背景中从左向右浮动。不幸的是，当它离开屏幕时，尽管向类添加了 overflow-y: hidden 属性，但仍会出现垂直滚动条。我尝试了百分比(100% 与过渡)但它没有用。不知道应该这样？我希望有人能告诉我如何解决这个问题，如果只使用 CSS 就可以解决的话。

.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

除了上面的注释之外，您还需要将 overflow-y: hidden 添加到 .largest-slowest 的父级而不是 .largest-最慢的本身。因此，如果您不希望窗口在 .largest-slowest 离开屏幕时滚动，您的 CSS 应该类似于:

body {
    overflow-y: hidden;
}

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