Html 页面加载时自动滑入div_Html_Css

Html 页面加载时自动滑入div

html css

Html 页面加载时自动滑入div,html,css,Html,Css,我有一个div，我希望它在页面加载完成1或2秒后从屏幕右侧滑动如果不使用单击功能，我似乎无法实现这一点。我怎样才能做到这一点？为页面加载添加回调函数： <body onload="script();"> 别忘了添加CSS3过渡以创建滑动效果 #elementToMove{ -webkit-transition: left 1s ease; transition: left 1s ease; } 这可以只使用CSS动画。下面是一个例子： .slidein { f

我有一个div，我希望它在页面加载完成1或2秒后从屏幕右侧滑动

如果不使用单击功能，我似乎无法实现这一点。我怎样才能做到这一点？

为页面加载添加回调函数：

<body onload="script();">

别忘了添加CSS3过渡以创建滑动效果

#elementToMove{
  -webkit-transition: left 1s ease;
  transition: left 1s ease;
}

这可以只使用CSS动画。下面是一个例子：

.slidein {
    float:right;

    animation-duration: 5s;
    animation-name: slidein;
}

@keyframes slidein {
    from {
        margin-right: -30%;
    }
    to {
        margin-right: 0%;
    }
}

这是你的。非常感谢你的链接，马文！帮了大忙！谢谢你，但我会坚持这里提供的CSS3选项：你可以坚持任何CSS转换，这不是你问题的关键部分。。。注意，我将getElementByID更正为getElementByID。看看附加的JSFIDLE。CSS延迟的问题是页面可能还没有加载。使用javascript的加载功能，您可以确保在启动动画之前，页面已向用户完全显示2秒钟谢谢您的详细回答！

.slidein {
    float:right;

    animation-duration: 5s;
    animation-name: slidein;
}

@keyframes slidein {
    from {
        margin-right: -30%;
    }
    to {
        margin-right: 0%;
    }
}