Применение transition

http://webref.ru/layout/html5-css3/transition

HTML

<div class="position_content" id="page_position_content">
  <div class="clearfix colelem" id="pu1266">
    <!-- group -->
    <div class="grpelem" id="u1266">
      <!-- custom html -->


    </div>
    <div class="myClass grpelem" id="u1128">
      <!-- simple frame -->
    </div>
  </div>
  <div class="myClass2 colelem" id="u1245">
    <!-- simple frame -->
  </div>
  <div class="colelem" id="u799">
    <!-- simple frame -->
  </div>
  <div class="verticalspacer"></div>
</div>

CSS

.version.index
/* version checker */

{
  color: #000007;
  background-color: #24ADA3;
}

.myClass {
  opacity: 0;
}

.MovMyBar > div {
  opacity: 1;
  animation: MovMyBar 4s;
}

@keyframes MovMyBar {
  0% {
    width: 0;
  }
}

#page {
  z-index: 1;
  min-height: 500px;
  background-image: none;
  border-width: 0px;
  border-color: #000000;
  background-color: transparent;
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

#page_position_content {
  padding-top: 1057px;
  padding-bottom: 62px;
  width: 100%;
}

#pu1266 {
  width: 106.67%;
  margin-left: -19.9%;
}

#u1266 {
  z-index: 5;
  width: 30px;
  min-height: 30px;
  border-width: 0px;
  border-color: transparent;
  background-color: transparent;
  position: relative;
  margin-right: -10000px;
  margin-top: 597px;
}

#u1128 {
  z-index: 3;
  height: 784px;
  position: relative;
  margin-right: -10000px;
  width: 68.85%;
  left: 31.16%;
}

#u1245 {
  z-index: 4;
  height: 784px;
  margin-top: 324px;
  position: relative;
  width: 73.44%;
  margin-left: 13.34%;
}

.myClass,
.myClass2 {
  border-width: 0px;
  border-color: #000000;
  background-color: #00A99D;
}

#u799 {
  z-index: 2;
  height: 10px;
  background-color: #FCEE21;
  margin-top: 287px;
  position: relative;
  width: 55.53%;
  margin-left: 11.98%;
}

#muse_css_mq,
.html {
  background-color: #FFFFFF;
}

body {
  position: relative;
  min-width: 320px;
}

JavaScript

$(window).scroll(function() {
  $('.myClass').each(function() {
    var imagePos = $(this).offset().top;
    var topOfWindow = $(window).scrollTop();
    if (imagePos < topOfWindow + 300) {
      $(this).removeClass('myClass').parent().addClass("MovMyBar");
    }

  });
});