html - 仅使用没有 jquery 或 java 脚本的 Css 从页面顶部到中间设置动画 div

Question

我必须在网站的页面加载时显示文本效果，即仅使用没有 jquery 或 java 脚本的 Css 从页面顶部到中间动画 div。 我的 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;}
}