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

我在使用CSS轉換，因爲它增加了不希望的高度與身體痛苦的問題，這裏是我的代碼：CSS3翻譯加入更多的高度和寬度

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作爲身體，但它僅移除滾動條和仍然存在的額外高度。

來源

2014-05-21 MMEDHAT_

什麼瀏覽器？ .... – Ben

你有沒有嘗試改變動畫div的位置爲固定？ –

Chrome版本34.0.1847.137 –

翻譯功能移動屏幕上的元素（也許關閉它），但導致頁面重新呈現會計的運動......因此滾動條。

使用位置值（頂部：-2000px）只是將元素從頁面中移出，但不會導致頁面重新呈現。

Position Value Demo

CSS

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

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

Translate Demo

CSS

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

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

來源

2014-05-21 09:15:39

謝謝@Paulie_D，但我已經知道頂級屬性可以正常工作，但我有很多元素需要相同的動畫，但具有不同的頂級屬性，所以我需要一些東西來表現所有動畫元素。 –

難道你不需要聲明不同的翻譯值嗎？沒有看到區別......但是如果它不適合你，那就OK。 –

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

回答

相關問題