アニメーションを外部から最終的な位置に変換する方法は？

Question

CSS、jQuery、Velocity.jsのいずれかを使用してアニメーションを行い、ブラウザウィンドウの任意の場所から最終的な位置にスライドしたいとします。

私がアニメーション化したいすべてのdivは、ブートストラップを使って配置されており、アニメーションがブラウザの特定の側からdivを開始するようにしたいと思います。それはアニメーションなしで現在の位置にスライドします。

基本的には、divとサイト全体が現時点ですべてが想定される場所に構築されており、アニメーションを含めてページの本体にオブジェクトをスライドさせたいと考えています。

jQueryやVelocityのアニメーションがわからないので、コードやFiddlesを送信してください。私はいろいろなものを探しましたが、私は答えを見つけることができませんでした。私はブラウザウィンドウからそれらをスライドさせるためのソリューションしか見ていない。

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>