CSS3翻譯增加更多的高度和寬度

Question

我在使用css轉換時遇到問題，因為它會增加身體的高度，這是我的代碼：

body {width: 1024px; height: 768px;  background: #FFF4B8;}

div.animated {
width: 100px;
height: 100px; 
background: black; 
position: absolute; 
top:100px; 
left:100px; 
-webkit-animation: fadeInUpBig 2s both 1s; }

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

和html：

<body>
<div class="animated">
</div>
</body>

我嘗試使用overflow: hidden對於身體而言是overflow: hidden的，但它只刪除了滾動條和仍然存在的額外高度。

Answer 1

平移功能可移動屏幕上的元素（並可能將其移開），但會導致頁面重新呈現以反映該移動...因此滾動條出現。

使用位置值（top：-2000px）只會將元素移出頁面，但不會導致頁面的重新渲染。

頭寸價值演示

的CSS

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    top:-2000px;    
  }

  100% {
    opacity: 1;
    top:100px;
  }
}

翻譯演示

的CSS

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

CSS3翻譯增加更多的高度和寬度

問題描述

1 個解決方案

解決方案1
0 2014-05-21 09:15:39

CSS3翻譯增加更多的高度和寬度

問題描述

1 個解決方案

解決方案1 0 2014-05-21 09:15:39

解決方案1
0 2014-05-21 09:15:39