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