css3 translate add more height and width
Question
I'm suffering an issue while using css translate as it adds undesired height to the body, Here's my code:
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:
<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.
1 answers
solution1
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.
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);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.