如何將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>