CSS3翻译增加更多的高度和宽度
[英]css3 translate add more height and width
问题描述
I'm suffering an issue while using css translate as it adds undesired height to the body, Here's my code: 
我在使用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);
}
}
and the html: 和html：
<body>
<div class="animated">
</div>
</body>
I tried to use overflow: hidden for the body, but it only removes the scrollbars and the extra height still there. 我尝试使用overflow: hidden对于身体而言是overflow: hidden的，但它只删除了滚动条和仍然存在的额外高度。
1 个解决方案
解决方案1
0 2014-05-21 09:15:39
The translate function moves the element on the screen (and perhaps off it) but causes the page to re-render accounting for the movement...hence the scrollbars. 平移功能可移动屏幕上的元素（并可能将其移开），但会导致页面重新呈现以反映该移动...因此滚动条出现。
Using a position value (top:-2000px) just moves the element off the page but does not cause a re-render of the page. 使用位置值（top：-2000px）只会将元素移出页面，但不会导致页面的重新渲染。
CSS 的CSS
@-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
top:-2000px;
}
100% {
opacity: 1;
top:100px;
}
}
CSS 的CSS
@-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.