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:

posted @ 2018-01-20 13:49  zhchoutai  阅读(226)  评论(0)  编辑  收藏  举报