Html 仅使用Css设置从页面顶部到中间的div动画，而不使用jquery或java脚本

我必须在网站的页面加载上显示文本效果，即只使用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]

---

提前感谢

您只需使用

@关键帧

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;}
}