ポジションをアニメートする方法は？

Question

1秒後に修正されるDIVをアニメーション化しようとしました。しかし、私はそれを行うことはできません。私は1秒後に右から左にスライドする "homepage-hero-module"と呼ばれるdivを望む。 FIDDLEで見ることができるように、1秒後に固定に変わります。どのようにアニメーション化するのですか？

私はCSSで試しましたが、運はありません。

-webkit-transition: left 1s; 
    -moz-transition: left 1s; 
    -o-transition: left 1s; 
    transition: left 1s; 

と

-webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 

JSFIDDLE

HTMLのCODE：

<div class="container-fluid"> 
    <div class="homepage-hero-module"> 
     Container with data 
    </div> 
</div> 

CSSコード：

body, html { 
    margin: 0px; 
    padding: 0px; 
    width: 100%; 
    height: 100%; 
} 
.container-fluid { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 
.homepage-hero-module { 
    background: #DDD; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 
.fixed { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 20px; 
    height: 100%; 
    background: red; 
} 
img { 
    height: 100%; 
    width: auto; 
} 

JSコード：

$(document).ready(function() { 
    setTimeout(function(){ 
       $('.homepage-hero-module').addClass('fixed'); 
    },1000); 
});  

Answer 1

あなたは位置がまだ絶対的である一方、幅をアニメーション化する必要があり、その後、すでに以下のスニペットをチェックして、私を聞かせて、私は推測する作業を固定

<div class="container-fluid"> 
    <div class="homepage-hero-module"> 
     Container with data 
    </div> 
</div> 

body, html { 
    margin: 0px; 
    padding: 0px; 
    width: 100%; 
    height: 100%; 
} 
.container-fluid { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 
.homepage-hero-module { 
    background: #DDD; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    transition:all .2s ease; 
} 
.fixed { 
    top: 0px; 
    left: 0px; 
    width: 20px; 
    height: 100%; 
    background: red; 
} 
img { 
    height: 100%; 
    width: auto; 
} 

$(document).ready(function() { 
setTimeout(function(){ 
    $('.homepage-hero-module').addClass('fixed'); 
},1000); 
    $('.homepage-hero-module').css('position','fixed'); 
}); 

Answer 2

に位置を設定しますあなたのフィードバックを知ってください。ありがとう！

$(document).ready(function() { 
 
    setTimeout(function() { 
 
    $('.homepage-hero-module').addClass('fixed'); 
 
    }, 1000); 
 
});

body, 
 
html { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.container-fluid { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
.homepage-hero-module { 
 
    background: #DDD; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
.fixed { 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 20px; 
 
    height: 100%; 
 
    background: red; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 
img { 
 
    height: 100%; 
 
    width: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class="homepage-hero-module"> 
 
    Container with data 
 
    </div> 
 
</div>

Answer 3

あなたはCSSでそれを行うことができます。 CSS3 animationを確認してください。

ライブデモ：

body, 
 
html { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
    min-height: 100%; 
 
} 
 
.container-fluid { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
.homepage-hero-module { 
 
    width: 100%; 
 
    height: 100vh; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    background-color: #f5f5f5; 
 
    animation: slideleft 1s 0.3s ease-out forwards; 
 
} 
 
img { 
 
    height: 100%; 
 
    width: auto; 
 
} 
 
@keyframes slideleft { 
 
    to { 
 
    background: coral; 
 
    width: 70px; 
 
    position: fixed; 
 
    } 
 
}

<div class="container-fluid"> 
 
    <div class="homepage-hero-module"> 
 
    Container with data 
 
    </div> 
 
</div>