Javascript 如何设置动画以固定位置？

我尝试设置一个在1秒后修复的DIV的动画。但我做不到。我想在一秒钟后，名为“主页英雄模块”的div从右向左滑动。正如你在小提琴中看到的，它在一秒钟后变为固定。那么如何设置动画呢

我尝试了css，但没有成功

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

及

HTML代码：

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

JS代码：

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

---

需要在“位置”仍然为绝对时设置宽度动画，然后将“位置”设置为“固定”

<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');
});   

包含数据的容器
正文，html{
边际：0px；
填充：0px；
宽度：100%；
身高：100%；
}
.容器液体{
宽度：100%；
身高：100%；
位置：相对位置；
}
.主页英雄模块{
背景：DDD；
宽度：100%；
身高：100%；
位置：绝对位置；
顶部：0px；
左：0px；
过渡：所有。2轻松；
}
.固定{
顶部：0px；
左：0px；
宽度：20px；
身高：100%；
背景：红色；
}
img{
身高：100%；
宽度：自动；
}
$（文档）.ready（函数（）{
setTimeout（函数（）{
$（'.homepage-hero-module'）.addClass（'fixed'）；
},1000);
$（'.homepage-hero-module'）.css（'position'，'fixed'）；
});   

我想已经开始工作了，请检查下面的代码片段并告诉我您的反馈。谢谢

$（文档）.ready（函数（）{
setTimeout（函数（）{
$（'.homepage-hero-module'）.addClass（'fixed'）；
}, 1000);
});
body，
html{
边际：0px；
填充：0px；
宽度：100%；
身高：100%；
}
.容器液体{
宽度：100%；
身高：100%；
位置：相对位置；
}
.主页英雄模块{
背景：DDD；
宽度：100%；
身高：100%；
位置：绝对位置；
顶部：0px；
左：0px；
}
.固定{
位置：固定；
顶部：0px；
左：0px；
宽度：20px；
身高：100%；
背景：红色；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}
img{
身高：100%；
宽度：自动；
}

包含数据的容器
只需使用CSS即可。检查CSS3

现场演示：


body，
html{
边际：0px；
填充：0px；
宽度：100%；
最小高度：100%；
}
.容器液体{
宽度：100%；
身高：100%；
位置：相对位置；
}
.主页英雄模块{
宽度：100%；
高度：100vh；
位置：绝对位置；
顶部：0px；
左：0px；
背景色：#F5；
动画：slideleft 1s 0.3s向前放松；
}
img{
身高：100%；
宽度：自动；
}
@关键帧滑动{
到{
背景：珊瑚；
宽度：70px；
位置：固定；
}
}

包含数据的容器
有没有不使用jQuery内置幻灯片的原因@jessh回答得很好，您也可以在固定类中设置位置，而无需使用jQuery
$(document).ready(function() {
    setTimeout( function(){
              $('.homepage-hero-module').addClass('fixed');
    },1000);
});    

<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');
});