CSS - smooth transition animation

Question

.banderole.in {
    left: 0;
    -webkit-transition: all .5s .2s ease-in-out;
    -o-transition: all .5s .2s ease-in-out;
    -moz-transition: all .5s .2s ease-in-out;
    transition: all .5s .2s ease-in-out;
}

 

Answer 1

.skin-ads {
    // background: url($skin-ads-bg) no-repeat fixed;
    background: url($skin-ads-img) no-repeat fixed;
    background-color: $default-bg;
    padding-top: 300px;
    background-position: center 140px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transition: all .5s .2s ease-in-out;
    -o-transition: all .5s .2s ease-in-out;
    -moz-transition: all .5s .2s ease-in-out;
    transition: all .5s .2s ease-in-out;
    @media (min-width: $break_d_common_lg) and (max-width: $break_d_common_lg) {
        padding-top: 375px;
    }
    @media (min-width: $break_d_common_md) and (max-width: $break_d_common_md) {
        padding-top: 287px;
    }
    @media (min-width: $break_d_common_sm) and (max-width: $break_d_common_sm) {
        padding-top: 245px;
    }
    @media (min-width: $break_d_md) and (max-width: $break_d_md ) {
        padding-top: 191px;
    }
    @media (min-width: $break_tablet) and (max-width: $break_tablet ) {
        padding-top: 156px;
        background-position: center 185px;
    }
    @media (min-width: $break_tablet) and (max-width: $break_tablet ) {
        padding-top: 156px;
        background-position: center 185px;
    }
    @media (max-width: $break_pre_tablet ) {
        padding-top: 15px;
        background: $default-bg;
    }
    &.pos-fixed {
        background-position: center -125px;
    }
}

 

Add transition on background upon scrolling ( add .pos-fixed class upon scrolling with js)