信息披露和公司简介总结

1、css3动画。

@-webkit-keyframes m_gsjs_page4_ani2{
    0%{
        opacity:0;
        -webkit-transform:translateX(100px);
        }
    100%{
        opacity:1;
        -webkit-transform:translateX(0);
        }
}
@-moz-keyframes m_gsjs_page4_ani2{
    0%{
        opacity:0;
        -moz-transform:translateX(100px);
        }
    100%{
        opacity:1;
        -moz-transform:translateX(0);
        }
}
.m_gsjs_page4_ani2{-webkit-animation:m_gsjs_page4_ani2 1s .2s ease both;-moz-animation:m_gsjs_page4_ani2 1s .2s ease both;}

添加类名即可。

 

2、jq的animation动画

<div class="m_gsjs_page_tit2_con ani" swiper-animate-effect="m_gsjs_tit" swiper-animate-duration="1s" swiper-animate-delay="" >
@-webkit-keyframes m_gsjs_tit{
    0% {
        -webkit-transform: translateX(30%);
        -ms-transform: translateX(30%);
        transform: translateX(30%);
        visibility: visible
    }

    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes m_gsjs_tit{
    0% {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
        visibility: visible
    }

    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}
.m_gsjs_tit{-webkit-animation-name: m_gsjs_tit;animation-name: m_gsjs_tit;}

要动的元素加上 ani类名,写上

swiper-animate-effect="m_gsjs_tit" swiper-animate-duration="1s" swiper-animate-delay=""属性就可以。

 

posted @ 2017-12-22 16:57  盖大楼  阅读(171)  评论(0编辑  收藏  举报