Animate從頂部到頁面的中間只有Css沒有jQuery或Java腳本

Question

我必須顯示文本效果頁面加載的網站，即Animate div從頂部到頁面的中間只有Css沒有jQuery或Java腳本。 我的DIV + CSS

#body_welcome_content{ width:450px; margin: 205px auto 0; font-size:48px; font-family: 'Playball', cursive; text-align:center; color:#FFF; margin-top:35px; text-shadow: 0px 1px 0px #000; 

}

幫我出新的CSS。也確保了跨瀏覽器的兼容性，使得它適用於所有瀏覽器。[如果沒有的jQuery] 預先感謝

Answer 1

你可以簡單地做，使用@keyframes

Demo

div { 
    width: 300px; 
    height: 300px; 
    background: red; 
    animation: centerme 2s; 
    -webkit-animation: centerme 2s; 
    position: absolute; 
    z-index: 999; /* To ensure that box is always on the top */ 
    animation-fill-mode: forwards; /* So that box doesn't move back to default place*/ 
    -webkit-animation-fill-mode: forwards; 
} 

@keyframes centerme { 
    0% {left: 0; top: 0;} 
    100% {left: 50%;top: 50%;margin-top: -150px;margin-left: -150px;} 
    /* Left and Top are 50% with margins which are half of width and height */ 
} 

@-webkit-keyframes centerme { 
    0% {left: 0;} 
    100% {left: 50%;margin-left: -150px;} 
}