如何将div动画从外部转换为最终位置？

Question

我想使用CSS，jQuery或Velocity.js从浏览器窗口的任何一侧滑动到最终位置。

我想要动画的所有div都使用Bootstrap放置，我希望动画从外部从浏览器的特定边开始div，并且它会滑入当前没有动画的位置。

基本上，divs和整个网站都建立在一切应该在这一刻，我想包括动画将对象滑动到页面的主体。

我不知道任何jQuery或Velocity动画，所以随时提交代码或小提琴。我搜索了很多不同的东西，但我找不到答案。我只看到解决方案将其滑出浏览器窗口。

Answer 1

看看这是你需要的。关键是animation。

.container { 
 
    font-family: sans-serif; 
 
    background-color: #def; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100vw; 
 
    min-height: 100vh; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    overflow: hidden; 
 
    animation: slide-from-right 2s; 
 
} 
 

 
@keyframes slide-from-right { 
 
    from { 
 
    left: 100vw; 
 
    } 
 
    to { 
 
    left: 0; 
 
    } 
 
}

<div class="container"> 
 
    <h1>Lorem Ipsum</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    <form> 
 
    <input placeholder="Some input"> 
 
    <input type="submit" value="Submit"> 
 
    </form> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</div>