Comment animer à position fixe?

J'essaie d'animer un DIV qui est fixée après 1 seconde. Mais je ne l'ai pas fait. Je veux, après une seconde, la div appelée "page d'accueil-héros-module" de glisser de la droite vers la gauche. Comme vous pouvez le voir dans le VIOLON, il change fixe au bout d'une seconde. Alors, Comment l'animer?

J'ai essayé avec du css, mais pas de chance. 

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

et

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

JSFIDDLE

CODE HTML:

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

CODE 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;
}

Code JS:

$(document).ready(function() {
    setTimeout( function(){
              $('.homepage-hero-module').addClass('fixed');
    },1000);
});
Aucune raison de ne pas utiliser jQuery intégré glisser dans la transition? api.jqueryui.com/slide-effect

OriginalL'auteur AndrewS | 2016-08-12

  1. 4

    Vous avez besoin pour animer la largeur tandis que la position est toujours absolu, et ensuite de définir la position fixe

    <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');
});
    Belle réponse, Vous pouvez définir la position fixe de la classe sans l'aide de jQuery

    OriginalL'auteur jessh