Html animation by css(Sequence Js Tutorial)

In sequence js,the javascript make load css definitation and make animation.

1.Start state

#sequence  .slide-content {    z-index:2;    left:100%;    font-size:100px;    opacity: 1;    color: #000;    width:100%;}

2.Medium state(constant)

/*Medium &constant state*/#sequence .animate-in .slide-content {    z-index:2;    width:100%;    left:0%;    opacity: 1;    color:#fff;    -webkit-transition-duration: 1s;    -moz-transition-duration: 1s;    -ms-transition-duration: 1s;    -o-transition-duration: 1s;    transition-duration: 1s;}

3.Final and exit state

/*end state */#sequence .animate-out .slide-content {    z-index:1;    color: white;    left:-100%;    opacity: 1;    width:100%;    -webkit-transition-duration: 1s;    -moz-transition-duration: 1s;    -ms-transition-duration: 1s;    -o-transition-duration: 1s;    transition-duration: 1s;}

Result: